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颜色选择器 */
   
     有默认值
     
   

改变颜色 data(){     return{         color1:''     } }, methods:{     btnChange(){         document.getElementsByTagName('body')[0].style.setProperty('--test', `${this.color1}`);      } }     

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

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

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