在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文件。