Я использую Grunt для создания моего проекта и cssmin внутри. Мой CSS файл содержит удаленные операторы @import и grunt build возвращает предупреждение:
Running "cssmin:generated" (cssmin) task
>> Ignoring remote @import of "http://fonts.googleapis.com/css?family=Lato:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic" as no callback given.,Ignoring remote @import of "http://fonts.googleapis.com/css?family=Maven+Pro:500" as no callback given.
>> 2 files created. 322.48 kB → 249.05 kB
В документации clean-css я нашел следующую информацию:
Чтобы встраивать операторы удаленного @import, вам необходимо предоставить метод обратного вызова для минимизации, например:
var CleanCSS = require('clean-css'); var source = '@import url(http://path/to/remote/styles);'; new CleanCSS().minify(source, function (errors, minified) { // minified.styles });Это связано с тем, что, хотя локальные файлы могут быть прочитаны синхронно удаленные ресурсы могут обрабатываться асинхронно. Если вы не предоставляете обратный вызов, то удаленные @imports будут оставлены нетронутыми.
Как я могу описать задачу cssmin в моем Gruntfile.js, чтобы исправить обработку удаленных операторов @import?
Перемещение операторов @import в начало файла CSS исправляет его для меня, у меня была та же проблема. Кажется, что cssmin не нравится, когда @import находятся в середине файла. Вы можете сделать это автоматически с помощью объекта options в Grunt, см. Этот ответ для более подробной информации: fooobar.com/questions/453691/...
Это не лучшее решение, но это сработало для меня, когда я переместил все операторы @import в другой файл и вставил его в свой html файл непосредственно перед моим основным файлом css.