scss 配置全局变量

首先使用官方提供的脚手架vue-cli进行搭建框架，这里就不做说明了，查阅官网即可。

等安装完所有依赖后，安装sass的依赖包：

npm install --save-dev sass-loader
//sass-loader依赖于node-sass
npm install --save-dev node-sass

vue.config.js 修改如下:
css: {
        loaderOptions: {
            sass: {
                 data:`@import "@/assets/css/base.scss";`
            }
        }
    }

装好后我们npm运行下项目发现：
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
ValidationError: Invalid options object. Sass Loader has been initialized using an options object that does not match the API schema…
这是 sass-loader 版本太高原因，好我们给他降级
先 npm uninstall --save-dev sass-loader
再 npm install --save-dev [email protected]

装完再次运行发现：
Error: Node Sass version 5.0.0 is incompatible with ^4.0.0.
这个错误是因为node版本跟 node-sass 不匹配，还是一样处理
先 npm uninstall --save-dev node-sass
再 npm install --save-dev [email protected]

再次运行发现：
options has an unknown property ‘data’. These properties are valid
什么鬼，没完没了！
后来发现 ：
data 是 旧版sass-loader写法(8.0以下)
prependData 是新版scss-loader(8.0及以上)
把 data 改 prependData即可

vue.config.js 最终修改如下:

css: {
        loaderOptions: {
            sass: {
                // 根据自己样式文件的位置调整
                prependData:`@import "@/assets/css/base.scss;`
                // data:`@import "@/assets/css/base.scss";`
            }
        }
    }

再运行，通关！