vue项目里使用scss全局变量_vue scss 全局变量

首先：

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

如图：

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

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

接下来：

需要在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')
          }
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

做好上述配置，重启项目就可以在项目里使用定义的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
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

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

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

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