gpt4 book ai didi

css - 防止 cssMin 删除 svg 样式

转载 作者:行者123 更新时间:2023-11-28 09:32:44 25 4
gpt4 key购买 nike

运行 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;
}

如何防止这种情况发生?

最佳答案

<罢工> grunt-contrib-cssmin使用 clean-css 在内部,如 options 中所述,以及任何 native ( clean-css) 选项“传递给 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完全跳过片段的“评论” block 方法将可用:

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

备注4.2尚未发布。


经过一些测试后,尽管根据文档,它们“应该”有效,但以上似乎都不起作用。
我唯一的选择是替换 grunt-contrib-cssmingrunt-postcss cssnano (这是我使用 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-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}

关于css - 防止 cssMin 删除 svg 样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44808858/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com