CSS 模組 (CSS Modules)

範例

基本 CSS 範例

Next.js 支援不同類型的樣式表，包括：

CSS 模組
全域樣式
外部樣式表

CSS 模組

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

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

範例

例如，考慮在 components/ 資料夾中的可重用 Button 元件：

首先，建立包含以下內容的 components/Button.module.css：

Button.module.css

/*
您無需擔心 .error {} 會與其他 `.css` 或 `.module.css` 檔案衝突！
*/
.error {
  color: white;
  background-color: red;
}

然後，建立 components/Button.js，導入並使用上述 CSS 檔案：

components/Button.js

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

export function Button() {
  return (
    <button
      type="button"
      // 注意 "error" 類別如何作為導入的 `styles` 物件的屬性被存取
      className={styles.error}
    >
      Destroy
    </button>
  )
}

CSS 模組僅對副檔名為 .module.css 和 .module.sass 的檔案啟用。

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

全域樣式

要將樣式表添加到您的應用程式，請在 pages/_app.js 中導入 CSS 檔案。

例如，考慮以下名為 styles.css 的樣式表：

styles.css

body {
  font-family: 'SF Pro Text', 'SF Pro Icons', 'Helvetica Neue', 'Helvetica',
    'Arial', sans-serif;
  padding: 20px 20px 60px;
  max-width: 680px;
  margin: 0 auto;
}

如果尚未存在，請建立 pages/_app.js 檔案。然後，導入 styles.css 檔案。

pages/_app.js

import '../styles.css'

// 新的 `pages/_app.js` 檔案中需要此預設導出。
export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

這些樣式 (styles.css) 將套用到您應用程式中的所有頁面和元件。由於樣式表的全域性質，且為了避免衝突，您只能在 pages/_app.js 中導入它們。

在開發環境中，以這種方式表達樣式表允許您在編輯時熱重載樣式——這意味著您可以保持應用程式狀態。

在生產環境中，所有 CSS 檔案將自動串接成單一的最小化 .css 檔案。CSS 的串接順序將與 CSS 導入到 _app.js 檔案的順序相匹配。請特別注意導入包含自身 CSS 的 JS 模組；JS 模組的 CSS 將按照與導入 CSS 檔案相同的排序規則進行串接。例如：

import '../styles.css'
// ErrorBoundary 中的 CSS 依賴於 styles.css 中的全域 CSS，
// 因此我們在 styles.css 之後導入它。
import ErrorBoundary from '../components/ErrorBoundary'

export default function MyApp({ Component, pageProps }) {
  return (
    <ErrorBoundary>
      <Component {...pageProps} />
    </ErrorBoundary>
  )
}

外部樣式表

Next.js 允許您從 JavaScript 檔案導入 CSS 檔案。這是可能的，因為 Next.js 將 導入 的概念擴展到了 JavaScript 之外。

從 `node_modules` 導入樣式

自 Next.js 9.5.4 起，允許從 node_modules 導入 CSS 檔案到應用程式的任何位置。

對於全域樣式表，如 bootstrap 或 nprogress，您應該在 pages/_app.js 中導入檔案。例如：

pages/_app.js

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

export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

對於導入第三方元件所需的 CSS，您可以在元件中進行。例如：

components/example-dialog.js

import { useState } from 'react'
import { Dialog } from '@reach/dialog'
import VisuallyHidden from '@reach/visually-hidden'
import '@reach/dialog/styles.css'

function ExampleDialog(props) {
  const [showDialog, setShowDialog] = useState(false)
  const open = () => setShowDialog(true)
  const close = () => setShowDialog(false)

  return (
    <div>
      <button onClick={open}>Open Dialog</button>
      <Dialog isOpen={showDialog} onDismiss={close}>
        <button className="close-button" onClick={close}>
          <VisuallyHidden>Close</VisuallyHidden>
          <span aria-hidden>×</span>
        </button>
        <p>Hello there. I am a dialog</p>
      </Dialog>
    </div>
  )
}

附加功能

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

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

CSS 模組

範例

全域樣式

外部樣式表

從 node_modules 導入樣式

附加功能

On this page

從 `node_modules` 導入樣式