Next.jsのコンポーネントでcss(scss)ファイルをimportしてcannot find moduleになった場合

Next.jsとTypescriptで開発をしていて、ちょっとハマった点について書いておきます。

コンポーネントにスタイルを当てるために、Component-Levet CSSというやり方を採用して、次のようなコードを書いてみました。

import React from 'react';
import styles from './MyComponent.module.scss';

const MyComponent = () => {
  // some code here.
};

export default MyComponent;

このコードの2行目のscssのimportの部分で、次のようなTypescriptのエラーが起きていました。

Cannot find moudle './MyComponent.module.scss'.
Cannot find module './MyComponent.module.scss' or its corresponding type declarations.'

scssファイル自体は確かにあるのに、Tyepscript的に認識できていないようです。

ちょっと調べて、次の手順で解消することができました。

next-env.d.tsを修正する

Next.jsのプロジェクトの直下に next-env.d.ts というファイルがあり、デフォルトでは、

/// <reference types="next" />
/// <reference types="next/types/global" />

という内容になっています。 コレを次のように修正します。

/// <reference types="next" />
/// <reference types="next/types/global" />
declare module '*.css';
declare module '*.scss';

tsconfig.jsonを修正する

tsconfig.jsoninclude に上記の next-env.d.ts を追加します。

{
  "compilerOptions": {
    // some options here.
  },
  "include": [
    "next-env.d.ts",
    "src/**/*"
  ],
  "exclude": [
    // some options here.
  ]
}

これでエラーを解消することができました。