CSS 樣式

現在讓我們來談談 CSS 樣式。

如你所見，我們的索引頁面 (http://localhost:3000) 已經有一些樣式。如果你查看檔案結構，會看到一個名為 styles 的資料夾，裡面有兩個 CSS 檔案：全域樣式表 (global.css) 和 CSS 模組 (Home.module.css)。

如果你的專案中沒有這些檔案，可以在此下載起始程式碼：

npx create-next-app nextjs-blog --use-npm --example "https://github.com/vercel/next-learn/tree/main/basics/assets-metadata-css-starter"

CSS 模組 (CSS Modules)

CSS 模組 能透過自動產生唯一的類別名稱，將 CSS 限定在元件層級。這讓你能在不同的檔案中使用相同的 CSS 類別名稱，而不必擔心類別名稱衝突。

除了 CSS 模組外，你還可以用多種方式為 Next.js 應用程式添加樣式，包括：

• Sass，允許你匯入 .css 和 .scss 檔案
• PostCSS 函式庫，例如 Tailwind CSS
• CSS-in-JS 函式庫，如 styled-jsx、styled-components 和 emotion

在本課程中，我們將討論如何在 Next.js 中使用 CSS 模組 和 Sass。讓我們開始吧！