cssmin不能正确处理@import [英] cssmin not correctly handling @import

问题描述

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

I am using cssmin on files containing @imports. cssmin is recursively importing local files correctly, but for imports that point to a URL the imports are left inline. This makes the resulting minified CSS invalid because @ rules must be at the beginning of the file. Does anyone know a good solution or workaround to this problem?

推荐答案

strong>和 @import ，我发现了一个包含 grunt concat 的解决方案：

I have exactly the same problem with cssmin and @import, and i found a solution with grunt concat:

1. 创建一个连接grunt任务：


2. 将@import url放在mified css文件的开头，并替换@imports url的引用


3. 执行任务concat：在cssmin任务后执行cssImport。

Grunt任务代码： cssImport）

Grunt task Code: to execute (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 。

这篇关于cssmin不能正确处理@import的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！