# 🏅 Day 2 - Nuxt3 專案引入 CSS 樣式

## 今日學習目標

- [在 Nuxt3 中加入並使用 CSS 預處理器（SCSS）](#加入預處理器)
- [在 Nuxt3 中設定全域共用樣式](#設定全域共用樣式)
- [在 Nuxt3 中設定全域共用變數](#%E8%A8%AD%E5%AE%9A%E5%85%A8%E5%9F%9F%E5%85%B1%E7%94%A8-SCSS-%E6%88%96-SASS-%E8%AE%8A%E6%95%B8)

### 前言

在開始今天的學習之前，可以先下載這個已經設定好基礎 Nuxt3 環境的 [範例](https://github.com/jasonlu0525/nuxt3-live-example/tree/day2-style-prepare) 。

// 使用 git 複製範例
git clone -b day2-style-prepare https://github.com/jasonlu0525/nuxt3-live-example.git day2-style-prepare-example

下載後，同學可以使用這個範例專案進行今天的練習。

## 加入預處理器
Nuxt3 預設使用 Vite 建立前端開發環境。然而 Vite 預設不包含 CSS 預處理器的編譯器。因此在撰寫 CSS 預處理器前，需要先手動安裝對應的編譯器 :

以下以 Sass 為例：

npm install -D sass

如果有其他需求，例如使用 Less 或 Stylus，可以依照需求安裝：

// Less
npm install -D less

// Stylus
npm install -D stylus

### 撰寫預處理器

安裝 Sass 編譯器後就可以在 VUE SFC 的 `<style>` 區塊撰寫 SCSS。以下是使用 SCSS 的範例：

<!-- pages/index.vue -->

<template>
  <h1>Hello world</h1>
</template>

<style lang="scss">
$primary:blue;
h1{
  color: $primary;
}
</style>

如果需要使用 Less，可以將 `<style>` 標籤的 `lang` 屬性設為 `less`：

<style lang="less">
@primary: blue;
h1 {
  color: @primary;
}
</style>

## 設定全域共用樣式

使用 Nuxt3 開發時，會在 [nuxt.config.ts](https://nuxt.com/docs/guide/directory-structure/nuxt-config) 設置全域的樣式，讓網站中所有頁面和元件的 HTML 都可以使用編譯後的選擇器。

### 第一步: 建立樣式表

由於 [`nuxi add`](https://nuxt.com.cn/docs/api/commands/add) 指令不包含生成 [assets](https://nuxt.com.cn/docs/guide/directory-structure/assets) 資料夾的功能，因此需要手動在專案根目錄下建立 assets 資料夾。

以下以建立 assets/stylesheets/all.scss 為例 :

1. 在專案的根目錄（與 nuxt.config.ts 檔案同層）手動建立 assets 資料夾。
2. 在 assets 資料夾中建立子資料夾 stylesheets 來存放樣表。
3. 在 assets/stylesheets 資料夾內新增 all.scss 檔案，例如：

// assets/stylesheets/all.scss

.title{
  color:red;
  font-style: italic;
}

建立樣式表後，專案的資料夾結構應如下：

nuxt3-project/
├── assets/
│   └── stylesheets/
│       └── all.scss
├── nuxt.config.ts
├── pages/
│   └── index.vue
└── ... 其他檔案 ( 省略 )

### 第二步: 設定 nuxt.config.ts

在 [css 選項](https://nuxt.com.cn/docs/api/nuxt-config#css) 填入樣式檔案的路徑，將樣式設置為全域的樣式。

// nuxt.config.ts
export default defineNuxtConfig({
	//... 其他設定
  css: [
    '@/assets/stylesheets/all.scss', 
  ],
})

補充，`@` 是專案資料夾 “根目錄” 路徑的縮寫 ( alias ) 。以下檔案結構為例， `@` 會指向 `nuxt3-project/` 。其他的縮寫可以閱讀官方文件 : [alias](https://nuxt.com/docs/api/nuxt-config#alias) 。

nuxt3-project/  <-------  @ 縮寫指向根目錄
├── assets/
│   └── stylesheets/
│       └── all.scss
├── nuxt.config.ts
├── pages/
│   └── index.vue
└── ... 其他檔案 ( 省略 )

### 第三步: 在 SFC 中使用樣式

設置全域樣式後，可以在 SFC 的 `<template>` 區塊中使用 `.title` 樣式。例如，在pages/index.vue 中，你可以這樣使用全域樣式：

<!-- pages/index.vue -->
<template>
  <p class="title">全域共用樣式</p>
</template>

其他關於 Nuxt3 在中加入樣式的細節，可以閱讀官方文件：[Nuxt3 加入樣式](https://nuxt.com/docs/getting-started/styling)。

## 設定全域共用 SCSS 或 SASS 變數

在 Nuxt3 ，若希望在每個頁面與元件都共用同一支 SCSS 或 SASS 變數，需要在 nuxt.config.ts 設定 vite 選項的 [](https://www.notion.so/709ddedc0e42419dba6f8dae377e9db8?pvs=21)[css.preprocessorOptions.scss.additionalData](https://vitejs.dev/config/shared-options.html#css-preprocessoroptions-extension-additionaldata) 。

// nuxt.config.ts
export default defineNuxtConfig({
  //... 其他設定
  vite: {
    css: {
      preprocessorOptions: {
        scss: {
          additionalData: `
            @import "@/assets/stylesheets/_variables.scss"; // 在全部的元件都引入 _variables.scss
          `,
        },
      },
    },
  },
});

### 使用時機

這一段設定的目的是讓變數在編譯的時候自動加載到每個 SFC 的 `<style>` 中。這樣就可以直接使用這些變數，不需要在每個 SFC 都寫 `@import "@/assets/stylesheets/_variables.scss"` 。

以上方的 assets/stylesheets/_variables.scss 檔案為例，定義了以下變數：

// assets/stylesheets/_variables.scss

$fs-base: 1rem;

$fs-sm: $fs-base * 0.875;
$fs-md: $fs-base * 1.5;
$fs-lg: $fs-base * 2;
$fs-xl: $fs-base * 2.5;

在 nuxt.config.ts 設定 css.preprocessorOptions.scss.additionalData 後，可以在 SFC 直接使用這些變數。例如：

// pages/hello.vue
<template>
  <h1>Hello world</h1>
</template>

<style lang="scss">
h1 {
  font-size: $fs-xl;
}
</style>

<br>

> 今日學習的[範例 Code - 資料夾: day2-style-example](https://github.com/hexschool/nuxt-daily-tasks-2024)

## 題目
請 fork 這一份 [模板](https://github.com/jasonlu0525/nuxt3-live-question) ，在 Nuxt3 引入 Bootstrap5 v5.3.3 並達成以下條件 :

- 設置 assets/stylesheets 資料夾，在內層新增 all.scss 檔案並引入以下 [bootstrap5 的 SCSS](https://getbootstrap.com/docs/5.3/customize/sass/#importing)

// assets/stylesheets/all.scss

@import "bootstrap/scss/functions";

@import "bootstrap/scss/variables";
@import "bootstrap/scss/variables-dark";

@import "bootstrap/scss/maps";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/root";

@import "bootstrap/scss/utilities";
@import "bootstrap/scss/reboot";
@import "bootstrap/scss/containers";

@import "bootstrap/scss/buttons";

@import "bootstrap/scss/utilities/api";

- 在 Nuxt.config.ts 將 all.scss 加入全域共用樣式
- 新增 page/index 頁面，並使用 Bootstrap5 [按鈕元件](https://getbootstrap.com/docs/5.3/components/buttons/#variants)
- 在 Nuxt.config.ts 設定全域共用 bootstrap5 的 SCSS 變數 ，並且可以直接使用在 .vue 檔案內的 `<style></style>`


## 回報流程

將答案上傳至 GitHub 並複製 GitHub repo 連結貼至底下回報就算完成了喔 !
解答位置請參考下圖（需打開程式碼的部分觀看）


<!--

解答 : https://github.com/jasonlu0525/nuxt3-live-answer/tree/day2-style

-->

回報區
---
| # | Discord | Github / 答案 |
| --- | ----- | ----- |
| 1 | 樂樂 | [GitHub repo](https://github.com/PinyiW0/NuxtDailyHw) |
| 2 | kevinhes | [GitHub repo](https://github.com/kevinhes/nuxt-daily-mission/tree/day2) |
| 3 | Rocky | [GitHub repo](https://github.com/WuRocky/nuxt3-live-question.git)
| 4 | Tough life | [Github repo](https://github.com/hakuei0115/Nuxt_testing)
| 5 | Steven |[Github repo](https://github.com/y7516552/nuxt3-live-question.git)|
| 6 | bb84729 |[Github repo](https://github.com/bb84729/NuxtDay2)|
| 7 | Otis |[Github repo](https://github.com/olivier615/nuxt3-live-question)|
| 8 | MY | [Github repo](https://github.com/ahmomoz/nuxt3-live-question) |
| 9 | hannahTW | [Github repo](https://github.com/hangineer/nuxt3-live-question) |
| 10| 小木馬 | [Github repo](https://github.com/wern0531/nuxt3-project) |
| 11 | dragon |[Github repo](https://github.com/peterlife0617/2024-nuxt-training-homework01/tree/feature/day02)|
| 12| wei_Rio | [Github repo](https://github.com/wei-1539/nuxtDailyHomeWork) |
| 13| Ming | [Github repo](https://github.com/ming77712/2024-nuxt3-daily01) |
| 14 | NeiL |[Github repo](https://github.com/Neil10241126/nuxt-demo/tree/day2-style)|
| 15 | LinaChen |[Github repo](https://github.com/Lina-SHU/nuxt3-live-question)|
|16|松鼠|[Github repo](https://github.com/meishinro/dailyMissionTwo)|
| 17 | Ching | [Github repo](https://github.com/huangching07/2024-nuxt-daily) |
|18|Stan|[Github repo](https://github.com/haoxiang16/nuxt-app/tree/Day2)|
|19|Jarek|[Github repo](https://github.com/lj787448952/nuxt_pratice)|
|20|眼睛|[Github repo](https://github.com/Thrizzacode/nuxt3-live-question)|
|21|sponge|[Github repo](https://github.com/tw30006/nuxt3-live-question)|
|22|Eden|[Github repo](https://github.com/1denx/NuxtDailyHw)|
|23|Jim Lin|[Github repo](https://github.com/junhoulin/Nuxt3-hw-day2)|
|24|好了啦|[Github repo](https://github.com/ZhangZJ0906/nuxt-live)|
|25|Ariel|[Github repo](https://github.com/Ariel0508/nuxtHw)| -->
|26|阿榮|[Github repo](https://github.com/Peg-L/hex-nuxt3-project)|
|27|tanuki狸|[Github repo](https://github.com/tanukili/Nuxt-2024-week01-2.git)|
|28|barry1104|[Github repo](https://github.com/barrychen1104/nuxt3-live-question/tree/day2-style)|
|29|wicebing|[Github repo](https://github.com/wicebing/nuxt3-live-example)|
|30|YI|[Github repo](https://github.com/sming0305/NUXT-learn)|
|31|hsin yu|[Github repo](https://github.com/dogwantfly/nuxt3-daily-task-live-question/commit/430b1a1ac4f1739d698070e650e7776518b46710)|
|32|Fabio20|[Github repo](https://github.com/fabio7621/nuxt3-live-question/tree/day2-style)|
|33|小蹦|[Github repo](https://github.com/lgk559/hex-Nuxt3/tree/day2-style-prepare-example)|
|34|Adonis|[Github repo](https://github.com/yuna1060416/2024Nuxt3Homework/tree/day02)|
|35| 阿塔 | [GitHub repo](https://github.com/QuantumParrot/2024-Hexschool-Nuxt-Camp-Daily-Task) |
|36| hoyiiiii | [GitHub repo](https://github.com/heyi5478/nuxt3-live-question) |
|37| Nielsen | [GitHub repo](https://github.com/asz8621/nuxt3-daily-task/tree/day2-style) |
|38| lidelin | [GitHub repo](https://github.com/Lide/nuxt3-live-question/tree/day2-style)
|39| camiwang | [GitHub repo](https://github.com/iris0952/nuxt3-live-question) |
|40| Johnson | [GitHub repo](https://github.com/tttom3669/2024_hex_nuxt_daily/tree/day2-style) |
|41| 陳正豪Howard | [GitHub repo](https://github.com/soarfox/hexschool-nuxt3-daily-task) |
<!-- 快速複製
|0| name | [GitHub repo]() |
-->