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類即可。但點擊事情觸發的時候，都會同步更改