vue项目使用scss全局变量

  1. 创建scss变量js文件src/assets/style/variables.scss.js，定义全局变量


const variables = {
    color_base:'#2CB7A8',
    size_16:'16px',
}
module.exports = variables
  1. 在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')
          }
        }
    }
}
  1. 使用
//行内样式使用
<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>
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容