跳到主要內容
建構你的應用程式樣式CSS

CSS

範例

Next.js 支援多種處理 CSS 的方式，包括

CSS Modules

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

CSS Modules 透過自動建立唯一的類別名稱，在本機範圍內設定 CSS。這讓您可以在不同的檔案中使用相同的類別名稱，而無需擔心衝突。這種行為使 CSS Modules 成為包含元件級 CSS 的理想方式。

範例

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

首先，使用以下內容建立 components/Button.module.css

Button.module.css
/*
You do not need to worry about .error {} colliding with any other `.css` or
`.module.css` files!
*/
.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"
      // Note how the "error" class is accessed as a property on the imported
      // `styles` object.
      className={styles.error}
    >
      Destroy
    </button>
  )
}

CSS Modules **僅適用於具有 .module.css 和 .module.sass 副檔名的檔案**。

在生產環境中，所有 CSS Module 檔案將自動串連成 **多個最小化和程式碼分割** 的 .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 檔案尚不存在，請建立一個。pages/_app.js 檔案 然後，import styles.css 檔案。

pages/_app.js
import '../styles.css'
 
// This default export is required in a new `pages/_app.js` file.
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'
// The CSS in ErrorBoundary depends on the global CSS in styles.css,
// so we import it after styles.css.
import ErrorBoundary from '../components/ErrorBoundary'
 
export default function MyApp({ Component, pageProps }) {
  return (
    <ErrorBoundary>
      <Component {...pageProps} />
    </ErrorBoundary>
  )
}

外部樣式表

Next.js 允許您從 JavaScript 檔案匯入 CSS 檔案。這是可能的，因為 Next.js 將 import 的概念擴展到 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 Modules）將利用快速重新整理來即時反映變更，因為編輯已儲存。
  • 當使用 next build 為生產環境建置時，CSS 檔案將捆綁到更少的最小化 .css 檔案中，以減少檢索樣式所需的網路請求數量。
  • 如果您停用 JavaScript，樣式仍將在生產環境建置中載入 (next start)。但是，next dev 仍需要 JavaScript 才能啟用快速重新整理。