防止cssMin删除svg样式

Question

防止cssMin删除svg样式

4

运行grunt.js任务cssMin时，https://github.com/gruntjs/grunt-contrib-cssmin会删除Svg css属性。例如：

.testClass {
   r: 4;
   width: 3px;
   margin-left: 18px !important;
}

将被转换为

.testClass {
   width: 3px;
   margin-left: 18px !important;
}

我该如何避免这种情况发生？

- Jack Fairfield

2个回答

2

您可以通过在选项中将重构设置为false来防止此问题：

options: {
  restructuring: false
},

- Brian

这个答案似乎也不起作用。该属性仍然出现。 - Jack Fairfield

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- tao · Accepted Answer

grunt-contrib-cssmin使用内部的clean-css，如选项所述，任何本地(clean-css)选项都会被传递给"clean-css"。

为方便起见，clean-css将优化分成不同的级别。有两个控制规则删除的选项，均在第二级别下找到：

restructureRules: false, // should disable all removals
skipProperties: []       // specify individual rules to skip

这应该可以做到：

cssmin: {
  options: {
    skipProperties: ['r']
  }
}

从clean-css 4.2.0 开始，将提供一种“注释”块方法，可跳过整个片段：

/* clean-css ignore:start */
.testClass {
   r: 4;
   width: 3px;
   margin-left: 18px !important;
}
/* clean-css ignore:end */

注意：4.2版本尚未发布。

经过一些测试，上述方法似乎都无效，尽管根据文档，它们“应该”有效。
我唯一的替代方案是用grunt-postcss cssnano替换grunt-contrib-cssmin（这是我在Grunt中使用的压缩解决方案）：

npm install grunt-postcss cssnano

grunt.initConfig({
  postcss: {
    processors: [
      require('cssnano')({
        // options here...
      })
    ]
  },
});

grunt.loadNpmTasks('grunt-postcss');
grunt.registerTask('postcss', ["postcss"]);

在实践中，我使用更多的postcss插件。
以下是一个实际示例，其中包括autoprefixer、pixrem、postcss-flexbox和cssnano：

module.exports = function(grunt) {
    grunt.initConfig({
        postcss: {
            options: {
                processors: [
                    require('pixrem'),
                    require('autoprefixer')({browsers: ['> 0%']}),
                    require('postcss-flexboxfixer'),
                    require('cssnano')({
                      autoprefixer:false,
                      zindex: false
                    })
                ]
            },
            jack: {
                files: [{
                    expand:true,
                    flatten:true,
                    cwd: 'assets/',
                    src: ['scss/*.css', '!**/variables.css'],
                    dest:'assets/css/'
                }]
            }
        },
        watch: {
            styles: {
                files: [
                    'assets/scss/*.css'
                ],
                tasks:['postcss:jack']
            }
        }
    });
    grunt.loadNpmTasks('grunt-postcss');
    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.registerTask('default', ["watch:styles"]);
    grunt.registerTask('jack', ["postcss:jack"]);
};

我特意注册了一个仅运行postcss插件的任务：

grunt jack

不要忘记，您需要安装每个插件才能与 postcss 一起使用。对于上面的示例，您需要安装以下插件：

npm install grunt-postcss cssnano pixrem autoprefixer postcss-flexboxfixer

... 而且，很可能您想要更改files以匹配您拥有的任何内容。

这一次，我进行了测试。 r 属性进入了被压缩的文件：

.testClass{r:20;width:3px;margin-left:18px!important}