Nextra 3.0 がリリースされました。 続きを読む

カスタム CSS のサポート

Nextra は .css.module.css、Sass (.scss.sass.module.scss.module.sass) ファイルを含む、Next.js の 組み込み CSS サポート と 100% 互換性があります。

たとえば、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 ドキュメント を参照してください。