在vue-cli 2.x中全局使用scss文件，以及相关报错

1.使用scss所需要安装的插件

1.1 安装node-sass

npm install node-sass --save-dev 

1.2 安装sass-loader 

npm install sass-loader --save-dev 

1.3 安装 style-loader

npm install style-loader --save-dev

2.添加配置

在bulid文件夹下的webpack.base.conf.js文件中加上以下代码：

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

3.我的文件目录

将需要使用scss文件全部在一个文件中引用，例如：我的全局scss文件是styles.scss

@import 'vendor/all';
@import 'settings/all';

 4.安装sass-resources-loader来全局引入

npm install sass-resources-loader --save-dev

修改bulid文件夹中的utils.js文件

将：

scss: generateLoaders('sass'),

修改为：

注意修改了配置文件后需要重启项目

scss: generateLoaders('sass').concat(
    {
        loader: 'sass-resources-loader',
        options: {
          //你自己的scss全局文件的路径
          resources: path.resolve(__dirname, '../src/assets/sass/styles.scss')
        }
    }
),

这时候我们就可以再vue文件中使用我们scss文件里的内容了

不过要注意，需要在需要加上lang="scss"

5.安装过程中可能会遇到的问题

5.1 node-sass 安装失败

5.1.1 失败的原因

npm 安装 node-sass 依赖时，会从 github.com 上下载 .node 文件。由于国内网络环境的问题，这个下载时间可能会很长，甚至导致超时失败。

5.1.2 解决办法（一）：使用淘宝镜像源安装（推荐）

npm i node-sass --sass_binary_site=https://npm.taobao.org/mirrors/node-sass/

 5.1.2 解决办法（二）：下载 .node 到本地

sass_binary_path后面的路径地址是.node文件在本机所处位置的路径

npm i node-sass --sass_binary_path=/Users/lzwme/Downloads/darwin-x64-48_binding.node

5.2 node-sass运行时报错Module build failed: TypeError: this.getResolve is not a function at Object.loader

5.2.1 报错原因

这是因为当前sass的版本太高，webpack编译时出现了错误，这个时候只需要换成低版本的就行了

5.2.2 解决办法

先卸载当前的sass-loader插件

npm uninstall sass-loader

安装指定版本的插件

npm install [email protected] --save-dev

（如有错误欢迎各位相互指教交流）