CSS 模組

Next.js 內建支援使用 .module.css 副檔名的 CSS 模組。

CSS 模組透過自動建立唯一的類別名稱來實現 CSS 的本地作用域。這讓您可以在不同檔案中使用相同的類別名稱，而不用擔心衝突。這種特性使 CSS 模組成為包含元件級 CSS 的理想方式。

範例

CSS 模組可以導入到 app 目錄下的任何檔案中：

import styles from './styles.module.css'

export default function DashboardLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return <section className={styles.dashboard}>{children}</section>
}

app/dashboard/styles.module.css

.dashboard {
  padding: 24px;
}

CSS 模組是一個_可選功能_，且僅對副檔名為 .module.css 的檔案啟用。常規的 <link> 樣式表和全域 CSS 檔案仍然支援。

在生產環境中，所有 CSS 模組檔案將自動合併為多個經過最小化和程式碼分割的 .css 檔案。這些 .css 檔案代表您應用程式中的熱門執行路徑，確保為您的應用程式載入最少的 CSS 以完成繪製。

全域樣式

全域樣式可以導入到 app 目錄下的任何佈局、頁面或元件中。

須知：這與 pages 目錄不同，在 pages 目錄中，您只能在 _app.js 檔案中導入全域樣式。

例如，考慮一個名為 app/global.css 的樣式表：

body {
  padding: 20px 20px 60px;
  max-width: 680px;
  margin: 0 auto;
}

在根佈局 (app/layout.js) 中，導入 global.css 樣式表以將樣式應用到應用程式的每個路由：

// 這些樣式將應用於應用程式中的每個路由
import './global.css'

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}

外部樣式表

外部套件發布的樣式表可以導入到 app 目錄中的任何位置，包括並置的元件：

import 'bootstrap/dist/css/bootstrap.css'

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body className="container">{children}</body>
    </html>
  )
}

須知：外部樣式表必須直接從 npm 套件導入或下載並與您的程式碼庫並置。您不能使用 <link rel="stylesheet" />。

附加功能

Next.js 包含附加功能來改善添加樣式的撰寫體驗：

在本地使用 next dev 運行時，本地樣式表（全域或 CSS 模組）將利用快速刷新 (Fast Refresh)，在保存編輯時立即反映變更。
在使用 next build 為生產環境構建時，CSS 檔案將被合併為更少的經過最小化的 .css 檔案，以減少獲取樣式所需的網路請求數量。
如果您禁用 JavaScript，在生產構建 (next start) 中仍會載入樣式。然而，next dev 仍需要 JavaScript 來啟用快速刷新 (Fast Refresh)。

範例

全域樣式

外部樣式表

附加功能

On this page