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

項目中咱們會定義不少全局變量（以下），爲了更好的代碼複用，避免寫麪條代碼。

- 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…