Подтвердить что ты не робот

Как убедиться, что удаленные @imports обработаны правильно с помощью Grunt

Я использую 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?

4b9b3361

Ответ 1

Перемещение операторов @import в начало файла CSS исправляет его для меня, у меня была та же проблема. Кажется, что cssmin не нравится, когда @import находятся в середине файла. Вы можете сделать это автоматически с помощью объекта options в Grunt, см. Этот ответ для более подробной информации: fooobar.com/questions/453691/...

Ответ 2

Это не лучшее решение, но это сработало для меня, когда я переместил все операторы @import в другой файл и вставил его в свой html файл непосредственно перед моим основным файлом css.