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

发布时间：2020-12-17 21:20:26 所属栏目：安全来源：网络整理

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

我有基于Bootstrap的 HTML模板,它有不同的颜色
???(红色,绿色等).颜色正在使用@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']);
}

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!