まくろぐ

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

更新:
作成:

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 に置き換えます。

関連記事

まくろぐ
サイトマップまくへのメッセージ