使用grunt使用不同的变量编译LESS

Question

我有基于Bootstrap的HTML模板,它有不同的颜色(红色,绿色等).颜色正在使用@brand变量 进行更改variables.less.现在,我进入到这个文件,更改变量,编译少的文件,去编辑CSS文件的目录,并根据它的颜色(重命名CSS文件red.css,green.css等等).我做了7次这7步(7种颜色= 7步).

我可以使用grunt或类似的东西自动执行此过程以及如何使用？

Answer 1

使用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']);
}

根据您的文件结构更改配置并根据需要添加任意数量的项目 - 我制作了2个项目