vue 定制主题与切换皮肤二篇

之前一篇文章介绍过如何通过less定制主题。今天我们将实现如何实现动态皮肤切换的第二种方法：

秘密武器就是less.modifyVars({l@color:'#fff'})

其中@color就是全局定义的变量。后面就是你想要更改的值。其实less.modifyVars这个方法是less-loader提供的一个方法。

我们可以在module rules 中的less-loader 下配置options modifyVars。 
实现 更改less 中的变量

{ test: /\.less/, use: [ { loader: "style-loader" },
                    { loader: "css-loader" },
                    { loader: "less-loader", options: { "modifyVars":{ "@test": "#ffb200", }
                        }
                    }
                ]
            },

而到底如何实现呢？

我们将以一个简单的demo做例子。如图：

当点击1,2,3,4四个小方框的时候。头部显示不同的颜色。

基本的思路就是给头部添加一个类名。而这个类名里的值就是backgroud:@bgColor,@bgColor就是我们设置的less变量。当点击灰色小方框的时候。我们在点击事件里传一个新的颜色值，再通过less.modify来重新赋值。

第一步：

第二步：

第三步:

接下来我们看看这个theme-color是如何设置的：

我们需要定义一个less文件。里面定义theme-color类名，然后设置其背景色。

还有一点非常重要：

我们需要在index.html文件中通过link的方式引入这个less文件

这样就可以实现动态更改颜色的目的。如果要更改整个项目的颜色。同样只需要给项目中需要更改背景颜色的地方添加theme-color类即可。但点击事情触发的时候，都会同步更改