返回 Nuxt 課程
06
Re:Nuxt 100 天練習曲
Day 6

為你的網站穿上新衣 (基礎篇)

Day 6·樣式設計·CSS 基礎

今天的主題是「樣式」(Styling)，也就是決定網站的「外觀設計」。

這部分內容比較多，所以我們會花幾天來探索。今天，我們先從最基本、也最重要的兩種方法開始，讓您無痛上手！

1. 全站的統一制服：全域樣式 (Global Styles)

如果你希望整個網站有一套「統一的制服」，例如共同的背景顏色、文字大小、連結顏色等，最簡單的方法如下：

1

在 assets/ 資料夾裡建立一個 CSS 檔案，例如 assets/css/main.css。

2

在裡面寫下你希望整個網站都遵守的樣式。

assets/css/main.css
/* assets/css/main.css */
body {
  background-color: #f0f0f0;
  font-family: sans-serif;
}
3

打開 nuxt.config.ts (專案的大腦)，把這個檔案的路徑加到 css 陣列裡。

nuxt.config.ts
// nuxt.config.ts
export default defineNuxtConfig({
  css: ['~/assets/css/main.css']
})

這樣一來，Nuxt 就會自動把這套「制服」應用到每一個頁面。

2. 元件的專屬服裝：<style> 區塊

除了全站制服，有時候你也希望某個特定元件（比如一個特別的按鈕）有自己獨特的樣子。這時候，你可以在那個元件的 .vue 檔案裡，直接寫樣式。

Button.vue
<template>
  <button class="special-button">按我！</button>
</template>

<style>
.special-button {
  background-color: red;
  color: white;
  border-radius: 8px;
}
</style>

3. 不會互相干擾的魔法：<style scoped>

這是非常、非常重要的一個魔法！

當你在 A 元件寫了樣式，通常不希望它影響到 B 元件。為了避免樣式互相「打架」，你只要在 <style> 標籤上加上 scoped 這個詞就好。

Button.vue (改良版)
<template>
  <button class="special-button">按我！</button>
</template>

<style scoped>
/* 加上 scoped 後，這些樣式就只會對這個元件生效 */
.special-button {
  background-color: red;
  color: white;
  border-radius: 8px;
}
</style>

scoped 會確保樣式只作用於當前的元件，就像給元件穿上一件隱形斗篷，讓它的風格與世隔絕。

強烈建議：為了避免預期外的問題，為你的元件樣式都加上 scoped 是個好習慣！

今日總結

今天我們學會了兩種最核心的樣式設定方法：

用 nuxt.config.ts 設定全域樣式。

在元件裡用 <style scoped> 設定專屬樣式。

掌握了這兩招，你已經能應付大部分的樣式需求了！明天，我們再來學習更厲害的工具，像是 SCSS 預處理器，讓寫 CSS 變得更有效率。