vue 如何引入全局scss变量

如何引入全局scss变量

1.新建一个全局scss文件

variables.scss

$common-color: #ff233c;

2.在vue.config.js中配置

module.exports = {
  devServer: {},
  css: {
    loaderOptions: {
      sass: {
        additionalData: `
        @import "@/assets/style/variables.scss";
        `
      }
    }
  }
}

3.使用

<style lang="scss" scoped>
.box {
 color: $common-color;
}
</style>

4.报错与异常

报错1: options has an unknown property ‘additionalData’

options has an unknown property ‘data’
options has an unknown property ‘prependData’

注意!这个additionalDatascss版本不同字段也是不同的, 如果没对应好会报错

sass-loader  v8-   对应的是"data"
sass-loader  v8   对应的是"prependData"
sass-loader  v10+  对应的是"additionalData"

报错2 Media query expression must begin with ‘(’

additionalData: `
        @import "@/assets/style/variables.scss";// 这里的;不能省略
        `
}