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

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

Ответ 1

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

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

Задача Grunt task: выполнить (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#custom-process-function.

Ответ 2

Я добавил параметр processImport: false, чтобы хрюкать.

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

Ответ 3

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

Установить node-less
импортировать файлы путем компиляции с less first
minify с помощью cssmin

Ссылки

Ответ 4

Помещение импорта вверху моего 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">

Ответ 5

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

@import url(custom-fonts.css);

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

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

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

Ответ 6

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

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

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