CSS压缩工具cssmin未正确处理@import语句。

Question

我在处理包含@import的文件时使用了cssmin。cssmin能够正确地递归导入本地文件，但是对于指向URL的导入，导入会被内联到CSS中。这使得经过压缩的CSS无效，因为@规则必须在文件开头。有没有人知道解决这个问题的好方法或变通方法？

- user3204380

---

尝试运行cssjoin然后cssmin？https://github.com/suisho/cssjoin或者为什么不从import@url本地化文件？ - JerryHuang.me

cssjoin 还会将 @imports 包含在文件中间。我无法定位 URL。 - user3204380

我在使用cssmin时也遇到了同样的问题。我通过将@import语句添加到我要合并的第一个文件的开头来解决了这个问题。 - Adam Marshall

你修好了吗？ - olefrank

Answer 1

我遇到了和 cssmin 和 @import 相关的问题，但我通过使用 grunt concat 找到了解决方案：

1. 创建一个 concat grunt 任务:
2. 在压缩后的 css 文件开头添加 @import url，并将 @imports url 的引用替换为 ""。
3. 在 cssmin 任务后执行任务 concat:cssImport。

Grunt 任务代码：执行（concat:cssImport）

 grunt.initConfig({     
   concat: {
      cssImport: {
            options: {

               process: function(src, filepath) {
                return "@import url(http://fonts.googleapis.com/css?family=Roboto:400,300,900);"+src.replace('@import url(http://fonts.googleapis.com/css?family=Roboto:400,300,900);', '');
              }
           }
         },
            files: {
                'your_location_file_origin/file.full.min.css': ['your_location_file_destination/file.full.min.css']
            }
        } )}

我的灵感来自于https://github.com/gruntjs/grunt-contrib-concat#custom-process-function。

（My inspiration comes from https://github.com/gruntjs/grunt-contrib-concat#custom-process-function.）

- Alex Carod

Answer 2

我将grunt中添加了processImport: false选项。

'cssmin': {
  'options': {
    'processImport': false
  }
}

- Fırat Küçük

---

这是错误的！它会使grunt忽略导入语句，而不是将其移动到顶部。 - olefrank

Answer 3

请按照以下步骤操作：

• 安装 node-less
• 通过使用 less 编译导入文件
• 使用 cssmin 进行最小化处理

参考资料

• node-less

• LESS compile error

- Paul Sweatte

Answer 4

我知道这个问题已经存在很长时间，但我发表这篇文章是为了帮助在堆栈溢出上寻找此问题的任何人...只需将您的代码放在 /!..../ 中，就像这样:

/*! * @import url('//fonts.googleapis.com/cssfamily=Roboto:300,400,400i,500,700,700i'); */

它将包含在您的目标min css中，但不要忘记在页面顶部使用远程导入。

- Omid Akhavan

Answer 5

我在 styles.scss 文件中有类似如下的代码：

：

（保留了 HTML 标签）

@import url(custom-fonts.css);

我的问题是 @import 找不到文件，因为根目录下的路径缺失。这是我在 yeoman angular generator Gruntfile.js 配置中做的事情:

cssmin: {
  options: {
    root: '<%= yeoman.dist %>/styles/'
  }
},

有用的链接 grunt-contrib-cssmin问题＃75

- Crisboot

Answer 6

将导入语句放在我的scss文件顶部对我没有起作用，最终我直接从HTML中导入了外部样式表：

<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
        rel="stylesheet">
  <link href="http://fonts.googleapis.com/css?family=Roboto:400,300"
              rel="stylesheet">

  <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
  <!-- build:css(.) styles/vendor.css -->
  <!-- bower:css -->
......
<!-- endbower -->
  <!-- endbuild -->
  <!-- build:css(.tmp) styles/app.css -->
  <link el="stylesheet" href="../bower_components/bootstrap/dist/css/bootstrap.css">
  <link rel="stylesheet" href="styles/app.css">

- Daniele