[Vite] Load Sass Globally in Vue

Sass 可以把常用的語法寫在獨立的 .scss 之中，需要的時侯再 import ，有點像我們寫 JavaScript 的共用 function 。但有些 .scss 真的太常用了，常用到幾乎每個檔案都要 import ，這時侯就可以考慮將這些 .scss 放到全域，方便開發。

一開始的 Vue.js Application 可能是像下面這樣，我們利用Sass把常用的值宣告成變數，如下例的 $color-blue ，方便之後的使用與維護。

<template>
  <div class="title">I love frontend</div>
</template>
<style lang="scss">
$color-blue: #4071a0;
.title {
  color: $color-blue;
  margin-bottom: 3rem;
}
</style>

後來越寫越多，就會把常用且共同特性的 class 或 變數集中在特定的 scss 檔案中管理。例如把 $color-blue 寫到 _variables.scss ，以及把 margin-bottom: 3rem 寫成 class .u-mb-lg { margin-bottom: 3rem; }放到 _utilities.scss 。

/* scss/abstracts/_variables.scss */
$color-blue: #4071a0;
/* scss/base/utilities.scss */
.u-mb-lg {
  margin-bottom: 3rem;
}
<template>
  <div class="title u-mb-lg">I love frontend</div>
</template>
<style lang="scss">
@import '@/scss/abstracts/_variables.scss';
@import '@/scss/base/_utilities.scss';
.title {
  color: $color-blue;
}
</style>

後來越來越多的 import ，每個 component 如果都 import的話太麻煩了。

<template>
  ...
</template>
<style lang="scss">
@import '@/scss/abstracts/_mixins.scss';
@import '@/scss/abstracts/_variables.scss';
@import '@/scss/base/_typography.scss';
@import '@/scss/base/_utilities.css';
@import '@/scss/components/button.scss';
/* ... */
</style>

這樣真的超累，而且我還這樣寫了很久才發現，其實 vite 可以將這些 scss 全域載入!!

Configuring Vite | Vite

可以參考上面官方的文件，只要在 vite.config.js 中加上 css.preprocessorOptions.scss.additionalData即可import 一次，就以全域使用這些預先宣告的變數、與class

export default defineConfig({
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `
          @import '@/scss/abstracts/_mixins.scss';
          @import '@/scss/abstracts/_variables.scss';
          @import '@/scss/base/_typography.scss';
          @import '@/scss/base/_utilities.css';
          @import '@/scss/components/button.scss'';
          `
      }
    }
  },
});

為了讓 vite.config.js 看起來更乾淨，我們可以新增 main.scss ，然後把所有的scss放進去：

/* scss/main.scss */
@import "abstracts/variables.scss";
@import "abstracts/functions.scss";
@import "abstracts/mixins.scss";
@import "base/base.scss";
@import "base/animation.scss";
@import "base/typography.scss";
@import "base/utilities.scss";
@import "base/layout.scss";
@import "components/button.scss"

接著在 vite.config.js import main.scss ，就大功告成

export default defineConfig({
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@import '@/scss/main.scss';`
      }
    }
  },
});

從此在 <style lang="scss"> 就不用在每一個 component 都要import了。