CSSMIN未正确处理@import

Question

我在包含@imports的文件上使用cssmin。 cssmin 以递归方式正确导入本地文件，但对于指向 URL 的导入，导入将保持内联状态。 这使得生成的缩小 CSS 无效，因为 @ 规则必须位于文件的开头。 有谁知道这个问题的好解决方案或解决方法？

Answer 1

我对cssmin和@import有完全相同的问题，我找到了grunt concat的解决方案：

1. 创建一个 concat grunt 任务，该任务：
2. 将@import url 放在 mized css 文件的开头，并将 @imports url 的引用替换为 "。
3. 执行任务 concat：cssImport 在 cssmin 任务之后。

咕噜咕噜的任务代码：执行（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。

Answer 2

我添加了processImport: false选项来咕噜咕噜。

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

Answer 3

使用以下过程：

• 安装node-less
• 首先使用 less 进行编译来导入文件
• 使用cssmin缩小

引用

• 无节点

• 减少编译错误

Answer 4

我在styles.scss中有这样的东西：

@import url(custom-fonts.css);

我的问题是@import找不到文件，因为缺少根路径。这是我对 yeoman 角度生成器 Gruntfile.js 配置所做的：

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

有用的链接咕噜咕噜-贡献-cssmin 问题 #75

Answer 5

我知道

这个问题很长时间了，但我为任何在堆栈溢出上寻找此问题的人发布这个......只需将您的代码放在/..../喜欢这个：

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

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

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">