在vue-cli 3中， 給stylus、sass樣式傳入共享的全局變量

在開發中有時，我們定義了大量的基礎樣式變量，例如：

大量的vue單文件組件會用到這些變量，每個組件都引人一次又太麻煩。全局引入是個不錯的方法，於是，在main.js 中引入variable.styl文件，但是你會發現，並不起作用。

在查閱了vue cli官方文檔后發現，有官方支持的方法。

• 1、給sass樣式傳入共享的全局變量

有的時候你想要向 webpack 的預處理器 loader 傳遞選項。你可以使用 vue.config.js 中的 css.loaderOptions 選項。比如你可以這樣向所有 Sass 樣式傳入共享的全局變量：

// vue.config.js
module.exports = {
  css: {
    loaderOptions: {
      // 給 sass-loader 傳遞選項
      sass: {
        // @/ 是 src/ 的別名
        // 所以這里假設你有 `src/variables.scss` 這個文件
        data: `@import "~@/variables.scss";`
      }
    }
  }
}

　　2、給stylus樣式傳入共享的全局變量

// vue.config.js 文件

module.exports = {
  css: {
    loaderOptions: {
      // 給 stylus-loader 傳遞選項
      stylus: {
        import: '~@/common/stylus/color.styl'
      }
    }
  }
}