vue-cli 项目中在main.js 引用scss 文件，在组件中应用却报错undefined

找了很多资料，终于发现有篇文章说的比较详细

链接：https://segmentfault.com/a/1190000010324128

安装完sass依赖包：

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

然后在build文件夹下的webpack.base.conf.js的rules里面添加配置：

{
  test: /\.sass$/,
  loaders: ['style', 'css', 'sass']
}

使用sass 开始开发，发现如果想使用sass 全局（共有的）样式，只能不停在每个组件import，而无法实现在main.js 中import 一劳永逸，网上找资料发现需要配置sass 全局变量

配置sass全局变量：

有一个babel插件可以完美的解决这个问题：sass-resources-loader可以访问sass资源任何一个需要访问的sass模块。所以，可以使用共享变量和混合所有SASS样式，而不去每个文件都引用。

然后开始下载，cnpm install --save-dev sass-resources-loader （等了半天.....很慢）

然后找到utils.js 文件，至于不知道这个文件到底是干什么用的，详看：https://www.jianshu.com/p/6646738ebb7e

接着说，找到这个文件之后，需要增加一些代码，如下是我修改完的：

这个第一处修改，第二处修改是：

找到return 对象，将原来的覆盖，改成现有的    generateSassResourceLoader()

最后  npm run dev 重启服务，就可以了