vue2中使用sass並配置全域性的sass樣式變數

在vue中使用樣式檔案sass，如果每個.vue檔案都引入該樣式，build出來檔案後，勢必會造成樣式的重複，冗餘，如果在main.js中全域性引入一個scss檔案，在其中定義變數在其他元件或者頁面中引用報變數未定義錯誤，其他的樣式可以正常顯示，顯然是編譯的問題。那麼，全域性設定並載入樣式就顯得很有必要了！

首先，npm安裝好

 "sass-loader": "^6.0.7",
 "sass-resources-loader": "^1.3.3",

在build/webpack.base.conf.js中，在module的rules裡新增

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

然後在build/utils.js檔案中加入如下程式碼：

需要注意的是：我的全域性樣式是放在src/common/sass/index.scss中的

  function resolveResouce(name) {
    return path.resolve(__dirname, '../src/common/sass/' + name);
  }
  function generateSassResourceLoader() {
    var loaders = [
      cssLoader,
      'postcss-loader',
      'sass-loader',
      {
        loader: 'sass-resources-loader',
        options: {
          //這是用到的sass檔案，多個檔案時用陣列的形式傳入，這是帶有變數和mixin的scss檔案
          resources: [resolveResouce('variable.scss'), resolveResouce('mixin.scss')] 注意這是我全域性樣式的位置，個人不同，需做調整
        }
      }
    ];

    if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        fallback: 'vue-style-loader'
      })
    } else {
      return ['vue-style-loader'].concat(loaders)
    }
  }

最後，將該頁面下方的return部分，改成如下模樣

  return {
    css: generateLoaders(),
    postcss: generateLoaders(),
    less: generateLoaders('less'),
    //sass: generateLoaders('sass', { indentedSyntax: true }),
    //scss: generateLoaders('sass'),
    sass: generateSassResourceLoader(),
    scss: generateLoaders('sass')
      .concat(
        {
          loader: 'sass-resources-loader',
          options: {
            resources: path.resolve(__dirname, '../src/common/sass/index.scss')  //注意這是我全域性樣式的位置，個人不同，需做調整
          }
        }
      ),
    stylus: generateLoaders('stylus'),
    styl: generateLoaders('stylus')
  }

參考：https://blog.csdn.net/qq_27868533/article/details/79651659
https://segmentfault.com/a/1190000013220058?utm_source=tag-newest