sass全局变量配置和使用示例

vue2.6 sass全局变量配置

• 安装sass-loader

npm install sass-loader@8.0.2 --save-dev

• vue.config.js中配置

module.exports = {
    css: {
    loaderOptions: {
      sass: {
        prependData: `@import '@/assets/styles/variables.scss';` // 注意此处的 ; 不能少！ node-sass 配置全局变量
        // additionalData: `@import '@/assets/styles/variables.scss';` // 如果上面的配置报错试试这个，dart-sass 配置全局变量
      }
    }
  }
}

• variables.scss

$color-main: #f60;
$bg-main: #999;

• 全局vue文件中使用

.container {
	color: $color-main;
}

作为变量在js或html标签中使用

• :export变量导出

// 将variables.scss中定义的变量导出
:export {
  mainColor: $color-main;
  mainBg: $bg-main;
}

• 引入变量使用

import variables from "@/assets/styles/variables.scss";

// 变量替换，为了在标签中使用
data() {
    return {
      variables: variables,
    }
},
computed: {
    bgStyle() {
      return {
        background: this.variables.mainBg
      }
    }
},

// 修改颜色和背景色
<div :style="{...bgStyle, color: variables.mainColor}">测试文字</div>