vue項目中如何全局引入scss/sass文件

場景：項目中我們會定義很多全局變量（如下）

 

 為了更好的代碼復用，避免寫重復代碼，問題的關鍵是怎么在我們的項目中引入這些文件。

方法1

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

 

在每個單文件組里引入上述代碼。

這個方法的缺點是，如果更改了文件的位置，你每個組件里的代碼都得修改。當然你可以利用 webpack 的 alias 功能寫成這種形式 @import "styles/_colors.scss";

但萬一修改了文件名呢，你還是得要一個個修改。

其實這不符合DRY（Don't repeat yourself ）原則，沒有做好代碼復用（WET, write every time，write everything twice, we enjoy typing, or "waste everyone's time"）。

 

（PS： 讀文章學英語😂   duplicate code;  redundancy（冗余性）； extensibility(可擴展性)） 

 

方法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/