vue專案中如何全域性引入scss/sass檔案

嘻嘻xixi發表於2019-04-10
VueCSS

專案中我們會定義很多全域性變數（如下），為了更好的程式碼複用，避免寫麵條程式碼。

 - src
   - styles
     - _colors.scss
     - _fonts.scss
     - _mixins.scss
     ...
複製程式碼

問題的關鍵是怎麼在我們的專案中引入這些檔案。

方法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;
}
複製程式碼

參考連結

css-tricks.com/how-to-impo…

vueschool.io/articles/vu…

相關文章