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

我使用Grunt来构build我的项目和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库文档中find了以下信息：

为了内联远程@import语句，你需要提供一个callback方法，比如：

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

这是由于一个事实，即虽然可以同步读取本地文件，但只能asynchronous处理远程资源。 如果您不提供callback，则远程@imports将保持不变。

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

Answer 1

将@import语句移动到CSS文件的顶部为我解决，我有同样的问题。 当@import语句位于文件中间时，似乎cssmin不喜欢它。 您可以使用Grunt中的options对象自动执行此操作，请参阅此答案以获取更多详细信息： https : //stackoverflow.com/a/28454233/2142259

Answer 2

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