VueJS 中設定共用的 Sass 變數

VueJS 中設定共用的 Sass 變數

上回架設了基本的 VueJS 開發環境,接下來要進行一些設定。因為在這個架構下,可以很方便的預處理SASS,基本上不用另外設定,但是之前在 NuxtJS 中已經有 SASS 中設定變數不能共用的問題。不過現在 vue-loader 已經有官方解決方法,就是使用 sass-resources-loader 載入global的變數。

用法很簡單,使用 'npm' 安裝

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

build/utils.js 中設定

scss: generateLoaders('sass').concat(
  {
    loader: 'sass-resources-loader',
    options: {
      resources: path.resolve(__dirname, '../src/style/_variables.scss')
    }
  }
)

這樣你就可以把變數都放進 _variables.scss
以後任何 .vue 中使用變數也可以輕鬆讀取了