防止 cssMin 删除 svg 样式

Prevent cssMin from removing svg styles

当运行grunt.js任务css分钟 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;
}

如何防止这种情况发生?

您应该可以通过在选项中将重组设置为 false 来防止这种情况发生:

options: {
  restructuring: false
},

grunt-contrib-cssmin 使用 clean-css internally, as stated in options 和任何原生 (clean-css) 选项 "are passed to clean-css".

为方便起见,

clean-css 将优化分组到 levels。有两个控制删除规则的选项,都在级别 2 下找到:

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

应该这样做:

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


从 clean-css 4.2.0 开始,一个 "comment" 完全跳过片段的块方法将可用:

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

4.2尚未发布。


经过一些测试,上面的 none 似乎确实有效,尽管根据文档 "should"。
我唯一的选择是用 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 个插件。
这是 autoprefixerpixrempostcss-flexboxcssnano 的实际示例:

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}