cssmin неправильно обрабатывает @import

Question

Я использую cssmin для файлов, содержащих @imports. cssmin правильно рекурсивно импортирует локальные файлы, но для импорта, который указывает на URL, импорт остается встроенным. Это делает полученный минимизированный CSS недействительным, потому что @ rules должен находиться в начале файла. Кто-нибудь знает хорошее решение или решение этой проблемы?

Answer 1

У меня точно такая же проблема с cssmin и @import, и я нашел решение с помощью grunt concat:

1. Создайте конкретную задачу, которая:
2. Поместите URL-адрес @import в начало измененного css-файла и замените ссылки на URL-адрес @imports на "".
3. Выполните задачу concat:cssImport после задачи cssmin.

Код задачи Grunt: выполнить (concat:cssImport)

 grunt.initConfig({     
   concat: {
      cssImport: {
            options: {

               process: function(src, filepath) {
                return "@import url(http://fonts.googleapis.com/css?family=Roboto:400,300,900);"+src.replace('@import url(http://fonts.googleapis.com/css?family=Roboto:400,300,900);', '');
              }
           }
         },
            files: {
                'your_location_file_origin/file.full.min.css': ['your_location_file_destination/file.full.min.css']
            }
        } )}

Мое вдохновение приходит от https://github.com/gruntjs/grunt-contrib-concat.

Answer 2

Я добавил processImport: false вариант ворчать.

'cssmin': {
  'options': {
    'processImport': false
  }
}

Answer 3

Используйте следующий процесс:

• устанавливать node-less
• импортировать файлы путем компиляции с less первый
• минимизировать с cssmin

Рекомендации

• Узел менее

• МЕНЬШЕ ошибка компиляции

Answer 4

Я знаю этот вопрос в течение очень долгого времени, но я публикую его для тех, кто ищет эту проблему при переполнении стека... просто поместите свой код в /!..../ вот так:

/*! * @import url('//fonts.googleapis.com/cssfamily=Roboto:300,400,400i,500,700,700i'); */

он будет включен в пункт назначения min css, но не забудьте использовать удаленный импорт в верхней части вашей страницы.

Answer 5

У меня было что-то вроде этого в styles.scss:

@import url(custom-fonts.css);

Моя проблема заключалась в том, что @import не смог найти файлы, потому что отсутствовал корневой путь. Вот что я сделал с конфигуратором yeoman angular generator Gruntfile.js:

cssmin: {
  options: {
    root: '<%= yeoman.dist %>/styles/'
  }
},

Полезная ссылка grunt-contrib-cssmin проблема № 75

Answer 6

Размещение импорта в верхней части моего scss не работает для меня, в итоге я импортировал внешние таблицы стилей непосредственно из html:

<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
        rel="stylesheet">
  <link href="http://fonts.googleapis.com/css?family=Roboto:400,300"
              rel="stylesheet">

  <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
  <!-- build:css(.) styles/vendor.css -->
  <!-- bower:css -->
......
<!-- endbower -->
  <!-- endbuild -->
  <!-- build:css(.tmp) styles/app.css -->
  <link el="stylesheet" href="../bower_components/bootstrap/dist/css/bootstrap.css">
  <link rel="stylesheet" href="styles/app.css">