Next.js で SASS を使う。

Next.js で sass を使いたかったのでメモ。

CSS Module では他のファイルで定義した mixin を直接 @use できないようなので、Next.js プロジェクトに SASS をインストールする必要がある。

pnpm を使っているので以下コマンドでインストール。

pnpm install sass --save-dev

CSS Module のファイル名の拡張子は .scss にする

// _mixin.scss

@mixin test_mixin() {
....
}

// component.module.scss

@use "@/app/styles/mixin" as mx;

.compo1 {
 @include mx.test_mixin;
}

Next.js はドキュメントサイトや管理画面的な感じが多く、あまりデザインされたサイトを見ない感じ。
そういう場合には Tailwind CSS を使えば効率良さそう。

でも、もうちょっとオリジナルでデザインしたい場合には CSS Module に SASS がいいかなと思っている。併用もできるようだから、ちょっとしたテキストの調整なんかは Tailwind CSS がいいのかもしれない？
この辺りは使っていかなきゃ分からなそうだ。