解决Vue在main.js全局引入scss文件，组件里使用scss变量报错问题

报错： Syntax Error: SassError: Undefined variable.

我一开始的引入方式是这样的：

 以为在main.js全局引入了就一劳永逸，写着常规css样式时还好好的，用到scss变量时就报错了。

· 解决方法一

 在需要用到的 .vue 文件里单独引用 variable.scss 变量文件，but达不到我们想要的“一劳永逸“效果

可能还会有奇奇怪怪的潜在问题，建议使用方法二。

· 解决方法二

 配置vue.config.js文件，使得全局都能使用scss变量，而不用每个文件单独引入

 我是按照vue官方的建议来的： https://cli.vuejs.org/zh/guide/css.html#css-modules

 在 vue.config.js 文件的 module.exports 加上以下配置项：

css: {
    loaderOptions: {
      // 给 sass-loader 传递选项
      // sass: {
      //   // @/ 是 src/ 的别名
      //   // 所以这里假设你有 `src/variables.sass` 这个文件
      //   // 注意：在 sass-loader v8 中，这个选项名是 "prependData"
      //   additionalData: `@import "~@/stylesheet/index.scss"`
      // },
      // 默认情况下 `sass` 选项会同时对 `sass` 和 `scss` 语法同时生效
      // 因为 `scss` 语法在内部也是由 sass-loader 处理的
      // 但是在配置 `prependData` 选项的时候
      // `scss` 语法会要求语句结尾必须有分号，`sass` 则要求必须没有分号
      // 在这种情况下，我们可以使用 `scss` 选项，对 `scss` 语法进行单独配置
      scss: {
        prependData: `@import "~@/stylesheet/variable.scss";`
      },
      // 给 less-loader 传递 Less.js 相关选项
      // less:{
      //   // http://lesscss.org/usage/#less-options-strict-units `Global Variables`
      //   // `primary` is global variables fields name
      //   globalVars: {
      //     primary: '#fff'
      //   }
      // }
  }
}

因为我用的是 scss 预处理器，用其他插件的可以看使用说明，很详细。

重新 npm run dev 起一下项目，就可以在组件里使用自己定义的scss变量了 √