-
创建scss变量js文件src/assets/style/variables.scss.js，定义全局变量
const variables = {
color_base:'#2CB7A8',
size_16:'16px',
}
module.exports = variables
- 在vue.config.js文件里使用webpack处理variables.scss.js文件
const scssVariables = require('./src/assets/style/variables.scss.js');
//module.exports里添加如下配置：
module.exports = {
//...其他配置
css: {
loaderOptions: {
sass: {
prependData: Object.keys(scssVariables)
.map(k => `\$${k.replace('_', '-')}: ${scssVariables[k]};`)
.join('\n')
}
}
}
}
- 使用
//行内样式使用
<div :style="{color:variables.color_base,fontSize:variables.size_16}">颜色</div>
<script>
// 引入scss变量js文件
import variables from "@/style/variables.scss.js"
export default {
// data里定义
data(){
return {
variables
}
}
}
</script>
//style里可以直接使用
<style lang="scss" scoped>
.title {
color: $color_333;
font-size: $size_16;
}
</style>
