15

我使用 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 语句？

4

2 回答 2

7

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

于 2015-07-02T01:36:12.493 回答
4

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

于 2016-04-26T01:16:07.047 回答