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语句，您需要提供一个回调缩小方法，例如：
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似乎不喜欢它。您可以使用Grunt中的options对象自动执行此操作，有关详细信息，请参阅此答案：https://stackoverflow.com/a/28454233/2142259

Answer 2

这不是最好的解决方案，但是当我将所有@import语句移动到另一个文件并将其插入我的主要css文件之前的html文件中时，它对我有用。

如何确保使用Grunt

2 个答案: