11

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

4

6 回答 6

7

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

  1. 创建一个 concat grunt 任务：
  2. 将@import url 放在mified css 文件的开头，并将@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。

于 2015-02-11T12:20:34.550 回答
6

我添加了processImport: falsegrunt 的选项。

'cssmin': {
  'options': {
    'processImport': false
  }
}
于 2015-05-29T16:03:48.540 回答
1

使用以下过程：

  • 安装node-less
  • 通过less首先编译导入文件
  • 缩小cssmin

参考

于 2014-05-29T22:42:57.963 回答
1

我知道这个问题很长时间了，但我为任何在堆栈溢出中寻找此问题的人发布此问题......只需将您的代码放入 / ！.... / 就像这样：

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

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

于 2017-09-05T06:56:06.660 回答
0

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

@import url(custom-fonts.css);

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

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

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

于 2016-06-14T05:31:57.767 回答
0

将导入放在我的 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">
于 2015-08-17T07:14:03.400 回答