twitter-bootstrap - 使用 grunt 用不同的变量编译 LESS

Question

我有基于 Bootstrap 的 HTML 模板，有不同的颜色
(红色、绿色等)。使用 @brand 更改颜色变量在
variables.less .现在我去这个文件，改变变量，编译
少文件，转到编译的css文件目录并重命名CSS文件
根据它的颜色( red.css ， green.css 等)。我做这个
步骤 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 个项目