內建支援 CSS

範例

• 基本 CSS 範例
• 使用 Tailwind CSS

Next.js 允許你從 JavaScript 輸入(import) CSS 檔案，主要是因為 Next.js 擴充了 JavaScript 的 import 概念。

增加一個全域的樣式表

若要增加一個樣式表到你的應用程式，你可以將 CSS 檔案輸入(import)到 page/_app.js 。

例如, 這個被命名為 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 檔案。 接著，輸入(import) styles.css 樣式表。

import '../styles.css'

// 這個預設輸出 (export) 在新的 `pages/_app.js` 是必要的
export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

這些樣式表(styles.css) 適用於應用程式內的所有頁面和元件。 基於樣式表的全域特性以及為了避免衝突，建議你只將它們輸入(import) 到 pages/_app.js 內。

開發期間，以上述的方式來處理樣式表可以讓你在編輯同時對其進行熱重新載入，這意味著你可以保持應用程式的狀態。

生產環境中，所有 CSS 檔案將會自動地被合併做一個單一的小型 .css 檔案。

從 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/ExampleDialog.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>
  )
}

加入元件級的 CSS

Next.js 透過 [name].module.css 的命名方式來支援 CSS Modules。

CSS Module 會自動地建立一個獨特的 class 名來限定 CSS 的區域範圍。 這使你可以在不同的檔案中使用相同的 class 名而不需要擔心會發生衝突。

上述行為使得 CSS Modules 成為包含元件級 CSS 的理想方式。 CSS Module 檔案可以在應用程式的任何位置被輸入。

例如：在 components/ 資料夾內一個重覆使用的 Button 元件。

/*
你不需要擔心 .error {} 與任何其他的 `.css` 或 `.module.css` 檔案有所衝突。 
*/
.error {
  color: white;
  background-color: red;
}

接著， 建立 components/Button.js，輸入並使用上述的 CSS 檔案：

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

export function Button() {
  return (
    <button
      type="button"
      // 請注意 "error" class 是如何在輸入 `styles` 物件時被視為一個屬性值來讀取。
      className={styles.error}
    >
      Destroy
    </button>
  )
}

CSS Modules 是一個 可選功能 ，並且只會被 .module.css 所命名的檔案所啟用。而一般的 <link> 樣式表和全域 CSS 檔案也依然會被支援。

生產環境中，所有 CSS Modules 檔案將會自動被合併做需多小型且程式碼分割的 .css 檔案。這些 .css 檔案代表著應用程式的熱執行路徑，並在應用程式繪製時確保載入最少的 CSS。

Sass 支援

Next.js 允許輸入 Sass 時所使用 .scss 和 .sass 檔名，你可以透過 CSS Modules 和 .modules.scss 或 .module.sass 擴充來使用元件級 Sass。

在使用 Next.js 內建的 Sass 支援時，請確保有安裝 sass：

npm install --save-dev sass

Sass 的支援有著如上方所述關於內建 CSS 一樣的好處和限制。

注意: Sass 支援 兩種不同的語法，它們各自有自己的擴充功能。 .scss 擴充需要你使用 SCSS 語法， 而 .sass 擴充則需要你使用 縮排語法 ("Sass")。 如果你不曉得要選擇哪一個，可以從 CSS 的超集合 - .scss 擴充功能開始，它不需要讓你學習縮排語法("Sass")。

自定義 Sass

如果你想要配置 Sass 編譯器，你可以在 next.config.js 使用 sassOptions 來進行相關配置。

例如，加入一個 includePaths：

const path = require('path')

module.exports = {
  sassOptions: {
    includePaths: [path.join(__dirname, 'styles')],
  },
}

Sass 變數

Next.js 支援從 CSS Module 檔案輸出的 Sass 變數。

例如， 使用輸出 primaryColor Sass 變數：

/* variables.module.scss */
$primary-color: #64ff00;

:export {
  primaryColor: $primary-color;
}

// pages/_app.js
import variables from '../styles/variables.module.scss'

export default function MyApp({ Component, pageProps }) {
  return (
    <Layout color={variables.primaryColor}>
      <Component {...pageProps} />
    </Layout>
  )
}

CSS-in-JS

範例

• Styled JSX
• Styled Components
• Emotion
• Linaria
• Tailwind CSS + Emotion
• Styletron
• Cxs
• Aphrodite
• Fela
• Stitches

使用任何一種 CSS-in-JS 方法是沒問題的，最簡單的就是使用行內樣式：

function HiThere() {
  return <p style={{ color: 'red' }}>hi there</p>
}

export default HiThere

我們打包 styled-jsx 來支援作用域隔離的 CSS；這是為了支援類似於網頁元件的 "影子 CSS"(Shadow CSS)，可惜這個不支援伺服器渲染並且只支援 JS。

有關其他熱門的 CSS-in-JS 方法(如 Styled-components)，可以參考上述範例。 使用 styled-jsx 的元件會類似於這個：

function HelloWorld() {
  return (
    <div>
      Hello world
      <p>scoped!</p>
      <style jsx>{`
        p {
          color: blue;
        }
        div {
          background: red;
        }
        @media (max-width: 600px) {
          div {
            background: blue;
          }
        }
      `}</style>
      <style global jsx>{`
        body {
          background: black;
        }
      `}</style>
    </div>
  )
}

export default HelloWorld

更多的範例，請參考 styled-jsx 文件。

FAQ

內建 CSS-in-JS 在關閉 JavaScript 時還能使用嗎？

如果你關閉 JavaScript， CSS 依然在生產環境建立(next start) 時會被載入；在開發期間，我們建議開啟 JavaScript 來獲得快速重新整理所提供的更好的開發體驗。

其他相關內容

下一步該做什麼呢？我們建議你可以跟著下列教學：