防止 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
个插件。
这是 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}
当运行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
个插件。
这是 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}