如何确保使用Grunt正确处理远程@imports

Question

我使用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语句,您需要提供一个minify方法的回调,例如:

var CleanCSS = require('clean-css');
var source = '@import url(http://path/to/remote/styles);';
new CleanCSS().minify(source, function (errors, minified) {
  // minified.styles
});

这是因为,虽然可以同步读取本地文件,但只能异步处理远程资源.如果您不提供回调,则远程@imports将保持不变.

如何在Gruntfile.js中描述cssmin任务来纠正处理远程@import语句？

Answer 1

将@import语句移动到CSS文件的顶部为我修复它,我遇到了同样的问题.cssmin当@import语句位于文件中间时,似乎不喜欢它.您可以使用optionsGrunt中的对象自动执行此操作,有关详细信息,请参阅此答案:https://stackoverflow.com/a/28454233/2142259