问题 cssmin无法正确处理@import

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

6319

2018-01-16 21:43

起源

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

cssjoin还将@imports包含在文件的中间。我无法本地化网址。 - user3204380

我和cssmin有同样的问题。我能够通过将@import语句添加到我正在组合的第一个文件的开头来解决它。 - Adam Marshall

你有没有解决这个问题？ - olefrank

答案:

我有完全相同的问题 cssmin 和 @进口，我找到了一个解决方案 grunt concat：

创建一个concat grunt任务：
将@import url放在mified css文件的开头，并将@imports url的引用替换为“”。
在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。

2018-02-11 12:20

我加了 processImport: false grunt的选项。

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

2018-05-29 16:03

这是错的！它使grunt忽略import语句，而不是将其移到顶部 - olefrank

使用以下过程：

安装 node-less
通过编译导入文件 less 第一
缩小 cssmin

参考

2017-08-17 07:14

将导入放在我的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">

2018-06-14 05:31

我有类似的东西 styles.scss：

@import url(custom-fonts.css);

我的问题是 @import无法找到这些文件 因为根 路径不见了。这是我用yeoman角度生成器Gruntfile.js配置所做的：

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

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

2017-09-05 06:56

我知道这个问题很长一段时间但我发布这个问题，任何人在堆栈溢出上寻找这个问题...只需将你的代码放入/！..../ 喜欢这个：

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

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

问题 cssmin无法正确处理@import

答案:

热门问题