cssmin无法正确处理@import

Question

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

Answer 1

我和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.

Answer 2

我processImport: false为grunt 添加了选项.

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

Answer 3

使用以下过程：

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

参考

• 无节点

• 更少的编译错误