Nextra 3.0 已發布。 了解更多
文件指南自訂 CSS

自訂 CSS 支援

Nextra 與 Next.js 的內建 CSS 支援 完全相容,包含 .css.module.css 以及 Sass (.scss.sass.module.scss.module.sass) 檔案。

例如,考慮以下名為 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 檔案並在其中導入您的 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} />
}

要瞭解更多關於 Next.js 中 CSS 支援的資訊,請查看 Next.js 文件