一键更换主题主题查了挺多资料的有几种方法：
1：本地创建不同的scss文件 分别申明不同的变量。
2：利用scss混合器的监听属性来监听。
3：利用插件（这个方法比较复杂所以没去研究）
4：利用vuex 存一个颜色的值，在每个地方动态绑定（：style=”{}”）
这里面第一种跟第二种其实差不多，主要介绍下第二种
利用scss混合器的监听属性来监听
1.创建basic.scss，全局引入，配置vue.config.js
const path = require’path’);module.exports = {chainWebpack: config) => { const types = [‘vue-modules’, ‘vue’, ‘normal-modules’, ‘normal’] types.forEachtype => addStyleResourceconfig.module.rule’scss’).oneOftype))) },}// 全局导入样式function addStyleResourcerule) { rule.use’style-resource’) .loader’style-resources-loader’) .options{ patterns: [ path.resolve__dirname, ‘./src/presentation/style/basic.scss’), ], })}
2.basic.scss 变量申明以及监听属性
// 混合器// 主题色@mixin fontColor){ color: $blue; [data-theme=”71E5B9″] & { color: #71E5B9 }}@mixin bgColor){ background: $blue; [data-theme=”71E5B9″] & { background: #71E5B9 }}@mixin borderColor){ border-color: $blue; [data-theme=”71E5B9″] & { border-color: #71E5B9 }}@mixin border){ border:1px solid $blue; [data-theme=”71E5B9″] & { border:1px solid #71E5B9; }}
3.需要的地方注入就行了
.el-pagination.is-background .el-pager li:not.disabled).active{ @include bgColor)}
4.改变主题色
document.documentElement.setAttribute”data-theme”,”71E5B9″)
5：注意：这个方法有局限性，就是样式不支持自定义选择，得提前写好几种