vue-cli 配置 sass 全域性變數

一、背景

在寫 vue 的時候，如果使用 sass 編寫，需要用到全域性變數、混合、公共函式的話，就要每個元件 @import 匯入；
如果變數檔案位置有改動的話，就得所有的引用都改動，所以就需要一種配置了變數，全域性都可以使用的方式。

我們在這裡使用 sass-resources-loader 作為解決方案。

二、介紹

sass-resources-loader 會將指定的 sass 檔案引入到每個使用 sass 模組的檔案中，減去使用者自身引用的繁瑣操作；
而且當公共檔案的路徑發生改變的時候，只需在配置的一處地方跟隨修改即可，無需多處修改；

三、配置

下面分享下如何在 vue-cli 工程裡配置：

1. 使用 vue-cli 建立的工程內都有一個叫 build 的資料夾，在這裡面主要放置的是 webpack 配置，開啟資料夾，找到 utils.js 檔案並開啟。
   
   

   codepng1.png
   
   2.在 cssLoaders 函式中的 return 前面加上

  // =========
  // SASS 配置
  // =========
  function resolveResouce(name) {
    // 此處路徑為存放全域性 sass 檔案的資料夾路徑
    return path.resolve(__dirname, '../src/assets/sass/' + name);
  }
  function generateSassResourceLoader() {
    var loaders = [
      cssLoader, 
      'sass-loader',
      {
        loader: 'sass-resources-loader',
        options: {
          // it need a absolute path
          resources: [resolveResouce('_variable.scss')]  // 此處填寫需要配置為全域性檔案的sass檔案
        }
      }
    ];
    if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        fallback: 'vue-style-loader'
      })
    } else {
      return ['vue-style-loader'].concat(loaders)
    }
  }

3. 再將下方 return 的物件修改成這樣：

return {
  css: generateLoaders(),
  postcss: generateLoaders(),
  less: generateLoaders('less'),
  // sass: generateLoaders('sass', { indentedSyntax: true }),  // 將這兩個替換成上面加上的函式
  // scss: generateLoaders('sass'),
  sass: generateSassResourceLoader(),
  scss: generateSassResourceLoader(),
  stylus: generateLoaders('stylus'),
  styl: generateLoaders('stylus')
}

配置完成！