Next.js 允許您從 JavaScript 檔案匯入 CSS 檔案。這是可能的，因為 Next.js 擴充套件了importJavaScript 之外的概念。餐飲加盟

新增全域性樣式表

要將樣式表新增到您的應用程式，請在 .css 檔案中匯入 CSS 檔案pages/_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'

// This default export is required in a new `pages/_app.js` file.
export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

這些樣式 (styles.css) 將應用於應用程式中的所有頁面和元件。由於樣式表的全域性特性，並且為了避免衝突，您

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

在生產中，所有 CSS 檔案將自動連線成一個縮小的.css檔案。

匯入樣式node_modules

從 Next.js9.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 支援使用檔案命名約定的CSS 模組[name].module.css。

CSS 模組通過自動建立唯一的類名來區域性作用於 CSS。這允許您在不同的檔案中使用相同的 CSS 類名而不必擔心衝突。

這種行為使 CSS Modules 成為包含元件級 CSS 的理想方式。CSS 模組檔案可以匯入到應用程式的任何位置。

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

首先，components/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 檔案：

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 模組是一項可選功能，僅對.module.css副檔名為.<link>仍然支援常規樣式表和全域性 CSS 檔案。

在生產中，所有 CSS Module 檔案將自動連線成許多縮小和程式碼拆分的.css檔案。這些.css檔案代表您的應用程式中的熱執行路徑，確保為您的應用程式載入最少的 CSS 以進行繪製。

Sass 支援

Next.js 允許您使用.scss和.sass擴充套件匯入 Sass。你可以通過 CSS Modules 和.module.scssor.module.sass擴充套件來使用元件級的 Sass。

在使用 Next.js 的內建 Sass 支援之前，請務必安裝sass：

npm install sass

Sass 支援與上面詳述的內建 CSS 支援具有相同的優點和限制。

注意：Sass 支援兩種不同的語法，每種都有自己的副檔名。該.scss擴充套件需要您使用SCSS語法，同時.sass擴充套件需要您使用縮排語法（“薩斯”）。

如果您不確定選擇哪個，請從.scssCSS 超集的擴充套件開始，並且不需要您學習縮排語法（“Sass”）。

自定義 Sass 選項

如果你想配置 Sass 編譯器，你可以使用sassOptionsin 來完成next.config.js。

例如新增includePaths：

const path = require('path')

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

Sass 變數

Next.js 支援從 CSS 模組檔案匯出的 Sass 變數。

例如，使用匯出的primaryColorSass 變數：

/* 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

例子

可以使用任何現有的 CSS-in-JS 解決方案。最簡單的一種是內聯樣式：

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

export default HiThere

我們捆綁了styled-jsx以提供對隔離作用域 CSS 的支援。目的是支援類似於 Web Components 的“shadow CSS”，不幸的是，它不支援伺服器渲染並且只支援 JS。

有關其他流行的 CSS-in-JS 解決方案（如樣式化元件），請參閱上述示例。

使用的元件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 文件。

常問問題

它在禁用 JavaScript 的情況下工作嗎？

是的，如果您禁用 JavaScript，CSS 仍將在生產版本 (next start) 中載入。餐飲加盟