這篇文章是延續前篇 用 Vue3 + Vite + TypeScript + TailwindCSS + ESLint 新增專案 的應用。實際開新專案後，發現自己還想安裝一些工具，先列出預計想要再安裝的東西：

• Vue-i18n
• SASS + CSS Module (本篇)
• 亮色與暗色主題

如果有安裝，都會用部落格作記錄，大家有興趣可以再點選閱讀。

安裝 SASS

▼ 安裝 SASS 套件

$ npm add -D sass

以上！

是的，你沒看錯，只要安裝 sass 套件就能使用啦 XD

▼ 接著在 vue 檔案加上 sass/scss 語法即可：

<style lang="scss">
body {
  background: red;
}
</style>

SASS 加上 CSS Module

什麼是 CSS Module

簡單來說，可以把他想成是 Vue 的 <style scoped>，將 CSS 獨立出來，讓不同的元件使用各自的 CSS 設定。

但 scoped 是「全」獨立，也就是說，如果今天 A.vue 和 B.vue 都會用到 .inner 這個 class，如果用 scoped 就要在兩個檔案各寫一次，或是把 .inner 寫到共用的 css 檔案裡。

但如果使用 CSS Module，就可以用 composes 語法去繼承其他檔案的 class，這樣就不用重寫，也不用放在共用的 css 檔裡。

CSS Module 可能還有許多優點與特色，但會讓我想要用的主要原因，就是上述的這個 composes，因為每次都要放到共用覺得好累，回查時也很麻煩 ＱＱ。

☆ 還不了解 CSS Module，但有興趣想要知道如何使用的，可以參考這篇文章的整理：

【Day 7】CSS 處理方案(一) - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

這一篇開始會整理在 React 中常見，但是我不熟悉或沒使用過的 CSS 處理方案。前端開發中 CSS 也是相當重要的一部分，通常都會採用一些 CSS 處理方案來解決原生 CSS 常遇到的問題。常見的...

https://ithelp.ithome.com.tw/articles/10240466

設定 CSS Module

▼ 打開 vite.config.ts，設定 CSS Module：

export default defineConfig({
  css: {
    modules: {
      localsConvention: 'camelCase'
    }
  }
})

詳細的 CSS Module 選項，可以參考 Vite 的官方文件

新增 SCSS 的 CSS Module 文件

Vite 有支援用 SCSS + CSS Module 的功能，請直接新增一個 {檔名}.module.scss 檔案，以我為例，新增了 helloWorld.module.scss，並放在 assets/styles 資料夾內。

.read-the-docs {
  color: red;
}

在 Vue 檔案匯入 module.scss 檔案

▼ 打開 HelloWorld.vue，匯入這隻 module.scss：

<script setup lang="ts">
import HelloWorldCss from '../assets/styles/helloWorld.module.scss'
</script>

▼ 使用 class 的方法有兩種，如果有連字號( - )，就要用 [''] 包起來，沒有連字號，就直接用 . 即可，跟物件有點像！

<template>
<p :class="HelloWorldCss['read-the-docs']">Click on the Vite and Vue logos to learn more</p>
</template>

打開瀏覽器，可以發現這段文字變成紅色了。打開開發者工具可以看到這段 class 後面加了亂碼，就跟 scoped 一樣會把 class 當成獨一無二的存在，至此就可以開心地在 SCSS 裡使用 CSS Module 囉！

14

發生錯誤。