vue3.0 scss一键换肤

一键更换主题主题查了挺多资料的有几种方法：
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.forEach(type => addStyleResource(config.module.rule('scss').oneOf(type)))
	  },
}
// 全局导入样式
function addStyleResource(rule) {
  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：注意：这个方法有局限性，就是样式不支持自定义选择，得提前写好几种