# 🏅 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) 。 ```dhall // 使用 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 為例： ```bash npm install -D sass ``` 如果有其他需求，例如使用 Less 或 Stylus，可以依照需求安裝： ```bash // Less npm install -D less // Stylus npm install -D stylus ``` ### 撰寫預處理器 安裝 Sass 編譯器後就可以在 VUE SFC 的 `<style>` 區塊撰寫 SCSS。以下是使用 SCSS 的範例： ```html <!-- pages/index.vue --> <template> <h1>Hello world</h1> </template> <style lang="scss"> $primary:blue; h1{ color: $primary; } </style> ``` 如果需要使用 Less，可以將 `<style>` 標籤的 `lang` 屬性設為 `less`： ```html <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 檔案，例如： ```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) 填入樣式檔案的路徑，將樣式設置為全域的樣式。 ```tsx // 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 中，你可以這樣使用全域樣式： ```html <!-- 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) 。 ```tsx // 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 檔案為例，定義了以下變數： ```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 直接使用這些變數。例如： ```scss // 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) ```scss // 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>` ![image](https://hackmd.io/_uploads/By0ybGHbyg.png) ## 回報流程 將答案上傳至 GitHub 並複製 GitHub repo 連結貼至底下回報就算完成了喔 ! 解答位置請參考下圖（需打開程式碼的部分觀看） ![](https://i.imgur.com/vftL5i0.png) <!-- 解答 : 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]() | -->