專案中我們會定義很多全域性變數（如下）

為了更好的程式碼複用，避免寫重複程式碼，問題的關鍵是怎麼在我們的專案中引入這些檔案。

方法1

<style lang="scss">
  @import "./styles/_colors.scss";
</style>

在每個單檔案組裡引入上述程式碼。這個方法的缺點是，如果更改了檔案的位置，你每個元件裡的程式碼都得修改。當然你可以利用 webpack 的 alias 功能寫成這種形式 @import "styles/_colors.scss"; 但萬一修改了檔名呢，你還是得要一個個修改。其實這不符合DRY原則，沒有做好程式碼複用。

方法2

可以利用sass-loader 的一個特性。可以將一段程式碼插入在每個scss檔案頭部。

vue 2.x 配置如下

    {
      loader: 'sass-loader',
      options: {
        data: `
          @import "@/styles/_colors.scss";
          @import "@/styles/_mixins.scss";
        `
      }
    }

vue 3.x 配置如下,可以參考vue-cli3配置

css: {
    loaderOptions: {
      sass: {
        data: `@import "@/styles/_colors.scss"
 
;`
      }
    }
  }

注意事項

採用第二種方法的時候，要注意因為它會在所有sass檔案裡新增相同的程式碼。

如果新增的不是變數,mixin之類的，而是類似下面的程式碼的話。假設你有20個scss檔案的話，下面這段程式碼就會出現在你最終打包出來的檔案20次。

.box {
    color: green;
}

參考連線：https://css-tricks.com/how-to-import-a-sass-file-into-every-vue-component-in-an-app/
https://vueschool.io/articles/vuejs-tutorials/globally-load-sass-into-your-vue-js-applications/