Next.js は Sass を使ったスタイルシート記述 (.scss / .sass ファイル）をサポートしています。
ほぼゼロコンフィグ（設定なし）で使用できますが、NPM の sass モジュールだけはマニュアルでインストールする必要があります。
### yarn の場合
$ yarn add sass --dev
### npm の場合
$ npm install sass --save-dev今まで .css 拡張子で作成していたファイルを、.scss に変更すれば、SCSS フォーマットでスタイル記述できます。
- 置換前:
styles/global.css - 置換後:
styles/global.scss
あとは、.css ファイルをインポートしている部分を、.scss に置換すれば導入完了です。
import type { AppProps } from 'next/app'
import '../styles/global.scss'
export default function MyApp({ Component, pageProps }: AppProps) {
return <Component {...pageProps} />
}もちろん、CSS Modules の仕組み を使っている場合にも Sass を使うことができます。
その場合は、.module.css という拡張子を .module.scss に置き換えます。
関連記事
- Next.js ですべてのページにグローバルな CSS を適用する (pages/_app.ts)
- Next.js でコンポーネント単位の CSS を作成する (CSS Modules)
- Next.js の Image コンポーネントで画像を表示する (next/image)
- Next.js の API Routes 機能で Web API を作成する
- Next.js のダイナミックルーティング機能を利用する (getStaticPaths, getStaticProps, getServerSideProps)
- Next.js でコンポーネント内に直接 CSS を記述する (styled-jsx)
- Next.js で全ページ共通のレイアウトを定義する（Layout コンポーネント）