Vue修改SCSS变量，实现一键变色_vue动态修改scss变量

1. 准备工作
   • 安装配置好scss或者less环境，全局引入main.js，具体自行百度
2. 直接贴上引入的global.scss文件代码

       /* 设置scss变量 */
       $mainColor: val(--btnColor,#fd6262) // val()不可少
       @mainColor：val(--btnColor,#fd6262) // less文件用法
       
       /* 使用 */
       .el-button{
           background-color: $mainColor;
       }
       
       /* 抛出 */
       :export {
           el-button: $mainColor; // 类名 ： 变量
       }
   

3. 在要的页面，使用

   /* 这边采用element颜色选择器 */
   <div class="block">
     <span class="demonstration mainColor">有默认值</span>
     <el-color-picker v-model="color1"></el-color-picker>
   </div>
   <el-button @click="btnChange">改变颜色</el-button>
    
    
   data(){
       return{
           color1:''
       }
   },
   methods:{
       btnChange(){
           document.getElementsByTagName('body')[0].style.setProperty('--test', `${this.color1}`); 
       }
   }
       
   

4. 验证，我这边修改的是element按钮的颜色，点击‘改变颜色’按钮后会变色，如果没变加层nexttick试试。

btnChange(){
    this.$nextTick(()=>{
        document.getElementsByTagName('body')[0].style.setProperty('--test', `${this.color1}`); 
    }
}

初级前端菜鸡做些有用小功能分享