【vue】vue-cli3配置scss全局变量

由于想在vue文件中使用scss变量，所以想配置一下全局使得更方便使用和维护，package.json中对应的版本号是："@vue/cli-service":"3.5.3"、"sass-loader": "^7.1.0"

1.配置

在项目根目录下的vue.config.js中配置

module.exports = {
  css: {
    loaderOptions: {
      // 没有分号会报错
      sass: {
        data: `@import "@/assets/styles/variables.scss";`
      }
    }
  }
}

由于import时结尾没写分号，总是报错，官网也说scss结尾必须要有分号，而且我对应的版本号是用"data"属性名import的

2.声明全局变量

在src\assets\styles\variables.scss文件中声明变量

$theme-color: #df2120;

3.使用全局变量

可以在vue文件或者其他scss文件中直接使用

例如：vue文件中

<style lang="scss" scoped>
.layout-header {
   height: 62px;
   background: $theme-color;
}
</style>

如果还不成功，可参考官网说明：向预处理器 Loader 传递选项

记录自己的成长，也希望能帮助到大家少走弯路。