我有基于Bootstrap的
HTML模板,它有不同的颜色
(红色,绿色等).颜色正在使用@brand变量进行更改
variables.less.现在我转到这个文件,更改变量,编译
更少的文件,转到编译的css文件目录并重命名CSS文件
根据它的颜色(red.css,green.css等).我做到了这一点
步骤7次(7种颜色= 7步).
(红色,绿色等).颜色正在使用@brand变量进行更改
variables.less.现在我转到这个文件,更改变量,编译
更少的文件,转到编译的css文件目录并重命名CSS文件
根据它的颜色(red.css,green.css等).我做到了这一点
步骤7次(7种颜色= 7步).
我可以使用grunt或类似的东西自动执行此过程以及如何使用？
解决方法
使用
grunt-contrib-less可以覆盖任何变量.因此,您可以通过执行以下操作来自动化您的流程 –
module.exports = function(grunt) {
grunt.initConfig({
less: {
/** Red**/
red: {
options: {
paths: ["less/"],modifyVars: {
brand : 'red'
}
},files: {
"css/red.css": "less/style.less"
}
},/** Red**/
green: {
options: {
paths: ["less/"],modifyVars: {
brand : 'green'
}
},files: {
"css/green.css": "less/style.less"
}
},});
grunt.loadNpmTasks('grunt-contrib-less');
grunt.registerTask('default',['less:red','less:green']);
}