报错：Syntax Error: SassError: Undefined variable.
我一开始的引入方式是这样的：
以为在main.js全局引入了就一劳永逸，写着常规css样式时还好好的，用到scss变量时就报错了。
· 解决方法一
在需要用到的 .vue 文件里单独引用 variable.scss 变量文件，but达不到我们想要的“一劳永逸“效果
可能还会有奇奇怪怪的潜在问题，建议使用方法二。
· 解决方法二
配置vue.config.js文件，使得全局都能使用scss变量，而不用每个文件单独引入
我是按照vue官方的建议来的：/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:{// // /usage/#less-options-strict-units `Global Variables`// // `primary` is global variables fields name// globalVars: {//primary: '#fff'// }// }}}
因为我用的是 scss 预处理器，用其他插件的可以看使用说明，很详细。
重新 npm run dev 起一下项目，就可以在组件里使用自己定义的scss变量了 √
