靜態資源、詮釋資料 和 CSS

CSS 樣式

讓我們來談談 CSS 樣式。

如你所見，我們的首頁 (http://localhost:3000) 已經有一些樣式了。若查看檔案結構，你會看到一個名為 styles 的資料夾，其中包含兩個 CSS 檔案：一個為全域樣式表 (globals.css)，另一個則為 CSS 模組 (Home.module.css)。

CSS modules 允許你在元件階層中以本地範疇（scope）的方式使用 CSS，並自動建立唯一的 class 名稱。這使你可以在不同的檔案中使用相同的 CSS class 名稱，而不用擔心 class 名稱衝突。

除了 CSS 模組，你還能以多種方式來設計你的 Next.js 應用程式樣式，包括：

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

在下一頁課程中，我們將談談如何在 Next.js 中使用 CSS 模組 和 Sass，讓我們開始吧！

返回上一頁 ← 前往下一頁 →