vue 3.0 scss 更换主题

这是一个比较笨的方法，有几个主题写几套样式，优点使用起来比较简单 ，缺点不高级维护起来比较麻烦

基于scss
1.首先先在你的文件夹下新建文件夹如下：

theme.scss

//.el-header,.el-footer 的背景色
$background-main-color1:#3b69d6;    //背景色
$background-main-color2:#209F5C;    //背景色
$background-main-color3:#283444;    //背景色
$background-main-color4:#c73c27;    //背景色

style.scss

//可以写颜色由于多个页面避免重复的样式编写

@import "./theme.scss";    //引入声明的皮肤文件

//初次进入调用
@mixin background-main-color($color){ //@mixin 后面的函数名称为自定义。
  background-color: $color;   //背景色默认为参数
  [background-main-color="background-main-color2"] & {    //如果条件成立，背景色则用$background-main-color2
    background-color: $background-main-color2;    //这个$background-main-color2已经在theme.scss中定义过了。
  }
  [background-main-color="background-main-color3"] & {    //如果条件成立，背景色则用$background-main-color3
    background-color: $background-main-color3;    //这个$background-main-color3已经在theme.scss中定义过了。
  }
  [background-main-color="background-main-color4"] & {    //如果条件成立，背景色则用$background-main-color4
    background-color: $background-main-color4;    //这个$background-main-color4已经在theme.scss中定义过了。
  }
}

在你需要使用的vue文件中

<style scoped  lang="scss">
    .el-header,.el-footer{
        @include background-main-color($background-main-color1);
    }
    </style>

注意：style.scss(名字可以自定义) 一定要是vue.config.js中导出的

   //主题颜色的切换，在方法中选换色
            defaultTheme(command){
                if(command == "blue") {
                    window.document.documentElement.setAttribute("background-main-color","background-main-color1");
                  
                } else if(command == "green") {
                    window.document.documentElement.setAttribute("background-main-color","background-main-color2");
                  
                }else  if(command == "gray"){
                    window.document.documentElement.setAttribute("background-main-color","background-main-color3");
                 
                }else {
                    window.document.documentElement.setAttribute("background-main-color","background-main-color4");
                
                }


            }
module.exports = {
    css: {
        loaderOptions: {
            sass: {
                prependData: `@import "~@/assets/scss/style.scss";`
            }
        }
    },
}

来源：CSDN

作者：太阳姐姐

链接：https://blog.csdn.net/weixin_45502613/article/details/103860412