昨天已經安裝了 sass 和 sass-loader，這兩個就是 Nuxt/Vue 專案使用 SCSS（Sass）的必要套件。

在 /assets/scss 資料夾中建立 app.scss 檔案，集中定義專案的 CIS 主色系、背景顏色、字級設定，以及常用的全域 class。這些設定作為專案的基礎樣式層，能讓各頁面快速引用並保持設計一致性。

// assets/scss/app.scss

// 字體
@import url('https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz@8..144&display=swap');

// 主色系
:root {
  --main-yellow: #F5B85D;
  --main-light-yellow: #FEF4EA;
  --main-light-orange: #DFB390;
  --main-orange: #BF6730;
  --main-green: #6F6C3E;
  --white: #FFFFFF;
}

// background color
.bg-yellow {
  background-color: var(--main-yellow) !important;
}
.bg-light-yellow {
  background-color: var(--main-light-yellow) !important;
}
.bg-orange {
  background-color: var(--main-orange) !important;
}
.bg-light-orange {
  background-color: var(--main-light-orange) !important;
}
.bg-green {
  background-color: var(--main-green) !important;
}

// text color
.text-yellow {
  color: var(--main-yellow) !important;
}
.text-light-yellow {
  color: var(--main-light-yellow) !important;
}
.text-orange {
  color: var(--main-orange) !important;
}
.text-light-orange {
  color: var(--main-light-orange) !important;
}
.text-green {
  color: var(--main-green) !important;
}
.text-white {
  color: var(--white) !important;
}

// text
.text-h1-semi-bold {
  font-weight: 600;
  font-size: 60px;
}
.text-h2-semi-bold {
  font-weight: 600;
  font-size: 40px;
}
.text-h3-semi-bold {
  font-weight: 600;
  font-size: 32px;
}
.text-h4-semi-bold {
  font-weight: 600;
  font-size: 24px;
}
.text-h4-medium {
  font-weight: 500;
  font-size: 24px;
}
.text-h4-regular {
  font-weight: 400;
  font-size: 24px;
}
.text-h5-regular {
  font-weight: 400;
  font-size: 20px;
}
.text-h6-regular {
  font-weight: 400;
  font-size: 18px;
}

...etc

app.vue 作為專案的根元件，僅保留全域配置；各頁面則集中於 /pages 管理。

<template>
  <router-view></router-view>
</template>

<script>
export default {
  name: 'App',
};
</script>

<style>
</style>

在 nuxt.config.ts 中，讓它吃到我們設定的 scss 檔案

// nuxt.config.ts nuxt的全域設定

import { defineNuxtConfig } from 'nuxt/config'
import vuetify from 'vite-plugin-vuetify'

export default defineNuxtConfig({
  css: [
    'vuetify/styles',
    '@mdi/font/css/materialdesignicons.css',
    '@/assets/scss/app.scss',
  ],
  build: {
    transpile: ['vuetify'],
  },
  vite: {
    ssr: { noExternal: ['vuetify'] },
    plugins: [
      vuetify({
        autoImport: true, // 自動匯入 Vuetify 元件/指令
      }),
    ],
  },
})

在 /pages 中新增 index.vue ，套用 vuetify 元件，以及 app.scss 設定好的 class ，看看有沒有效果。

index.vue 預設會是首頁 http://localhost:3001

// pages/index 

<template>
  <v-app>
    <v-main>
      <v-container class="text-center">
        <div class="text-h1-semi-bold text-orange">hello</div>
        <v-btn class="bg-yellow" size="large" prepend-icon="mdi-rocket-launch">
          Hello Vuetify in Nuxt 32222
        </v-btn>
      </v-container>
    </v-main>
  </v-app>
</template>

<script setup>
</script>

<style scoped></style>

有套上顏色就是成功了喔！！！！

※ 如果npm run dev 有顯示 error，可以先查看一下 npm 的版本是不是 20.19.0 ，要記得用nvm切版本，否則起環境會有錯誤提示而看不到畫面。