如何通过less在vue2中达到切换皮肤的目的

先装less

npm install less less-loader --save-dev

然后将该 loader 添加到 webpack 的配置中去，例如：

webpack.config.js

module.exports = {module: {rules: [{test: /\.less$/i,use: [// compiles Less to CSS'style-loader','css-loader','less-loader',],},],},
};

新建see.less 文件定义变量

@primary-color: #007bff;
@secondary-color: #6c757d;// :root {
//     --primary-color: @primary-color;
//     --secondary-color: @secondary-color;
//   }@primary-color: var(--primary-color, rgba(255, 80, 215, 1));   // 2a50d7   4875f6
.mt {color:  var(--primary-color);
}


<script>
import "../src/less/saa.less";
</script>或者
<style lang="less" scoped>
@import "../src/less/saa.less";
</style>

在后在切换主题

<div class="mt">-----------更改这里的文字颜色啊---------------------</div><button @click="changeSkin('blue')">Load Theme 1</button><button @click="changeSkin('green')">Load Theme 2</button>//然后在方法里边去更改less变量。methods: {changeSkin(skin) {let primaryColor;let secondaryColor;if (skin === 'blue') {primaryColor = '#007bff';secondaryColor = '#6c757d';} else if (skin === 'green') {primaryColor = '#28a745';secondaryColor = '#6c757d';}// 修改 CSS 自定义属性的值document.documentElement.style.setProperty('--primary-color', primaryColor);document.documentElement.style.setProperty('--secondary-color', secondaryColor);},},