Vue修改SCSS变量，实现一键变色

最新推荐文章于 2025-06-04 10:34:43 发布

undefined——

最新推荐文章于 2025-06-04 10:34:43 发布

阅读量4.3k

点赞数 3

CC 4.0 BY-SA版权

本文链接：https://blog.csdn.net/qq_43432809/article/details/125612863

本文介绍如何在前端项目中利用SCSS或LESS预处理器设置并应用颜色变量，实现按钮颜色的动态更改，并通过Element UI组件库进行演示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

准备工作
- 安装配置好scss或者less环境，全局引入main.js，具体自行百度

直接贴上引入的global.scss文件代码

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

在要的页面，使用

/* 这边采用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}`); 
    }
}

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

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

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