首先:
在项目的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变量的方法啦,喜欢的小伙伴点个收藏哦。