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

问题描述

在写组件样式的时候，普通样式都没问题，一碰到$变量就error

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):

      color: $normal-active-color;
            ^
      Undefined variable.
   ╷
22 │       color: $normal-active-color;
   │              ^^^^^^^^^^^^^^^^^^^^
   ╵
  stdin 22:14  root stylesheet
      in C:\Users\Sherry\mio-ui\packages\theme-chalk\button.scss (line 22, column 14)
 @ ./packages/theme-chalk/button.scss 4:14-306 15:3-20:5 16:22-314
 @ ./examples/main.js 4:0-45

解决方法

看了这位老师的解决方法，在vue.config.js里添加了css配置
解决Vue在main.js全局引入scss文件，组件里使用scss变量报错问题

css: {
    loaderOptions: {
        scss: {
		//根据版本不同有三种写法：data |  additionalData | prependData
          data: `@import "./packages/theme-chalk/common/var.scss";`
        }
    }
  }

感谢老师感谢互联网