Next.js で Sass (scss/sass) を有効にする

更新: 2021-05-06 / 作成: 2021-05-06

Next.js は Sass を使ったスタイルシート記述 (.scss / .sass ファイル）をサポートしています。ほぼゼロコンフィグ（設定なし）で使用できますが、NPM の sass モジュールだけはマニュアルでインストールする必要があります。

sass のインストール

### yarn の場合
$ yarn add sass --dev

### npm の場合
$ npm install sass --save-dev

今まで .css 拡張子で作成していたファイルを、.scss に変更すれば、SCSS フォーマットでスタイル記述できます。

置換前: styles/global.css
置換後: styles/global.scss

あとは、.css ファイルをインポートしている部分を、.scss に置換すれば導入完了です。

pages/_app.tsx

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

Next.js のスタイル設定 (CSS)
へ戻る

関連記事