在vue项目中全局引入一个 .scss文件

需求：在用vue-cli开发项目的时候，有这样的一个需求：我有个.scss的公共文件须要在项目的每一个 .vue 文件使用，而不用分别在.vue文件中引入。这个时候就须要用到 sass-resources-loader 。

（1）第一步：
首先要下载 ： sass-resources-loader

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

（2）第二步，在项目里找到build/utils文件。并找到下图位置

而后在scss: generateLoaders('sass')后面加上如下代码：

.concat(
      {
        loader: 'sass-resources-loader',
        options: {
          // 须要全局引入的sass文件，这里引入了的scss文件，在全部的.vue文件均可以用到这份css样式，
          // 下面的resources接受一个数组，能够添加多个scss文件
          resources: [path.resolve(__dirname, '../src/assets/sass/index.scss')]
        }
      }
    )

（3）此时文件已经配置成功，须要重启npm run dev服务才能够看到效果.

（4） 若是要导入多个文件,有两种办法：

一、在上面代码的resources数组选项增长多一个scss文件路径。
二、在上面的index.scss文件里用@import引入其余scss文件。