vue项目里使用scss全局变量

最新推荐文章于 2025-11-18 03:35:09 发布

原创最新推荐文章于 2025-11-18 03:35:09 发布 · 9.7k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #scss #javascript

本文档介绍了如何在Vue项目中创建并应用SCSS全局变量。首先，在src/style目录下创建variables.scss.js文件，定义所需变量。然后，在vue.config.js中通过webpack配置，使scss变量在编译时注入到每个scss文件。重启项目后，可以在.vue文件的<style>标签内或单独的.scss文件中直接使用这些变量。通过这种方法，可以实现项目的统一风格和易于维护的代码。

首先：

在项目的src文件夹下的style文件夹下创建scss变量js文件

如图：
在这里插入图片描述

创建好的variables.scss.js文件里定义需要全局定义的scss变量

/*
* 项目css基础变量设置
* ps:修改变量后需要需要重启项目生效
*/
const variables = {
    color_333:'#333',
    size_16:'16px',
}
module.exports = variables

接下来：

需要在vue.config.js文件里使用webpack处理variables.scss.js文件

const scssVariables = require('./src/style/variables.scss.js');
//module.exports里添加如下配置：
module.exports = {
    //...其他配置
    css: {
        loaderOptions: {
          sass: {
            prependData: Object.keys(scssVariables)
              .map(k => `\$${k.replace('_', '-')}: ${scssVariables[k]};`)
              .join('\n')
          }
        }
    }
}

做好上述配置，重启项目就可以在项目里使用定义的scss变量啦

使用方法：

1.文件.vue文件里使用：

//style里面使用：
<style lang="scss" scoped>
.title {
  color: $color_333;
  font-size: $size_16;
}
</style>
//行内样式使用：得先引入scss变量js文件
<div :style="{color:variables.color_f3f3f3,fontSize:variables.size_16}">颜色</div>
import variables from "@/style/variables.scss.js"
//data里定义
data(){
    return {
        variables
    }
}

2.单独的.scss文件中使用

//直接使用变量就行了
.title{
    color: $color_333;
    font-size: $size_16;
}

以上就是在vue中使用scss变量的方法啦，喜欢的小伙伴点个收藏哦。