Next.jsでSCSSを使う

初めに

Next.jsでSCSSを使用する際の自分用忘備録です。追加事項があれば随時増やしていきたいです。

注意書き

初学者のため、誤りや拙い点があるかと思います。明らかな間違いがあるときにはコメントをいただけると嬉しいです。

Sassの導入

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

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

上記のコマンドをNext.jsプロジェクトで実行すると、Sassのインストールが完了します。

適当なコンポーネントを追加し、scssファイルが使用できていることを確認してください。

// src/app/components/layouts/header/Header.tsx
import React from 'react'
import styles from './Header.module.scss';

const Header = () => {
  return (
    <>
    <header className={styles.header}>
      <h1 className={styles.header__title}>Homete!</h1>
    </header>
    </>
  )
}

export default Header

.header {
    text-align: center;
    padding: 20px;
    background-color: $main-bg;

    .header__title {
        font-size: 28px;
        font-weight: bold;
        color: $white;
    }
}

無事ヘッダーにスタイリングが適用できました！

変数の設定

SCSSで変数を使う際にも設定が必要です。（先ほどのコード例ではすでに変数を使用しています、すみません...）

// next.config.mjs
import path from 'path';
import { fileURLToPath } from 'url';

const __dirname = path.dirname(fileURLToPath(import.meta.url));

const nextConfig = {
  sassOptions: {
    // ファイルパスを記載
    prependData: `@import "${path.resolve(__dirname, 'src/styles/_variables.scss')}";`,
  },
};

export default nextConfig;

上記のコードをnext.config.mjsに記載すると、無事変数がグローバルで使えるようになると思います。

ちなみに自分のstylesの位置はここです。

最後に

いままでNext.jsやReactを使用する時にはTaileind CSSを使っていたのですが、Sassの方が馴染みがあって使いやすく感じます。

Sassの自動整形についての環境構築については以下の記事が参考になりました。