使用grunt使用不同的变量编译LESS [英] Compile LESS with different variables using grunt

问题描述

我有基于Bootstrap的HTML模板，它有不同的颜色
（红色，绿色等）。在
variables.less 中使用 @brand 变量改变颜色。现在我转到这个文件，更改变量，编译
less文件，转到编译的css文件目录，并根据它的颜色重命名CSS文件
（ red.css ， green.css 等）。我可以使用grunt或类似的方法自动执行此过程，以及如何执行此过程？

I have HTML template based on Bootstrap, that have different colors (red, green, etc.). Colors are changing using @brand variable in variables.less. Now I go to this file, change variable, compile less files, go to compiled css files directory and rename CSS file according it's color (red.css, green.css, etc.). And I make this steps 7 times (7 colors = 7 steps).

p>

推荐答案

使用 grunt-contrib-less ，你可以覆盖任何变量。因此，您可以通过执行以下操作来自动执行流程：

Using grunt-contrib-less you can overwrite any variable. So you can automate your process by doing something like the following -

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件商品

change the config based on your file structures and add as many item as you need - I made 2 items

这篇关于使用grunt使用不同的变量编译LESS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！