背景：在專案開發中，我們經常會將樣式中的值作為一個變數，尤其是需要處理主題切換時候，更是會通過sass的語法定義樣式變數。

1. 首先我們定義一個樣式變數檔案，檔名暫定：var.scss，如下：

// var.scs
$--main-color:red;

2. 我們在開發的業務中，需要編寫樣式時，需要引入【var.scss】檔案，然後使用裡面的變數：

 1 <template lang="pug">
 2 div(style="height:100%;width:100%; ")
 3     .text 我是紅色，因為顏色變數$--main-color為red
 4 
 5 </
 
template>
 6 <style scoped lang="scss">
 7 @import "../../style/var.scss";
 8 .text {
 9     color: $--main-color;
10 }
11 </style>

頁面效果如下：

 問題：這樣太過於麻煩，幾乎每個頁面都需要引入 var.scss 檔案才能去使用顏色變數，這樣太過於繁瑣了。

解決方法就是在vue.config.js的配置檔案中配置以下，則var.scss的變數自動視為全域性引入，後續使用中不需要再次引入var.scss檔案：

 1 module.exports = {
 
 2     chainWebpack: (config) => {
 3           const oneOfsMap = config.module.rule("scss").oneOfs.store;
 4           oneOfsMap.forEach((item) => {
 5             item
 6               .use("sass-resources-loader")
 7               .loader("sass-resources-loader")
 8               .options({
 
 9                 // 公用scss
10                 resources: path.resolve(__dirname, `./src/imom-web/style/var.scss`),
11               })
12              .end();
13           });15      }
16 }