DockerでNext.jsでSassを使うときの設定

ローカル上のnpm run devのときにSassを使っていても問題はなかったが、
Docker環境にNext.jsを設定し、Sassを使うときにエラーが出たのでその時の解決法を記載しておく。

インストール方法

npm install --save-dev sass

globals.cssをglobals.scssに
layout.tsxなどに記載されている
import "./globals.css";をimport "./globals.scss";
に変更

page.module.cssをpage.module.scssに
page.tsxなどに記載されている
import styles from "./page.module.css";を
import styles from "./page.module.scss";
に変更

しかしこのままdocker-compose upをしてもエラーが出て使えません。

Module not found: Can't resolve './globals.scss'

./app/layout.tsx (3:1)

Module not found: Can't resolve './globals.scss' 1 | import type { Metadata } from "next"; 2 | import { Geist, Geist_Mono } from "next/font/google";

3 | import "./globals.scss"; | ^ 4 | 5 | const geistSans = Geist({ 6 | variable: "--font-geist-sans",

https://nextjs.org/docs/messages/module-not-found

Dockerfileの修正

こちらを追加

# 依存関係のインストール（sassを含む）
RUN npm install
RUN npm install sass --save-dev

Docker Composeの修正

build: context: . dockerfile: Dockerfileを追加

docker-compose.yml

services:
  nextjs:
    build:
      context: .
      dockerfile: Dockerfile
    volumes:
      - .:/app
      # node_modulesはマウントしない（コンテナ内のものを使用）
      - /app/node_modules
    ports:
      - "3000:3000"
    environment:
      - NODE_ENV=development

Dockerイメージの再ビルド

変更を適用するには、Dockerイメージを再ビルドします。

docker-compose down
docker-compose build
docker-compose up

これでエラーは消えSassが使えます。

まだ、エラーが残っていたので。

Missing argument $color.
  ┌──> app/page.module.scss
163│     filter: invert();
  │             ^^^^^^^^ invocation
  ╵
  ┌──> sass:color
1 │ @function invert($color, $weight: 100%, $space: null) {
  │           ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ declaration
  ╵
  app/page.module.scss 163:13  root stylesheet

filter: invert();に引数がないためのようなのでfilter: invert(1);などにする。

これですべてエラーが消えました。