[TypeScript] "module.scss" import

TypeScript를 사용할 때 module.scss(혹은 module.css 등)를 import 하려하면 아래와 같은 에러가 발생하는 경우가 있다.

import styles from "./App.module.scss";

'./App.module.scss' 모듈 또는 해당 형식 선언을 찾을 수 없습니다.

이 에러는 스타일을 module로 import할 때만 발생하며, 아래와 같이 스타일을 import할 때는 발생하지 않는다.

import "./App.scss";

원인은 TypeScript가 scss(혹은 css) 파일을 모듈로 인식하지 못해서 발생하는 것으로 생각된다.
따라서 scss에 대한 모듈 형식을 선언해주는 것으로 문제를 해결할 수 있다.

선언 방법은 아래와 같다.

1. src 폴더 내에 global.d.ts 파일 생성

2. 파일 내에 아래 내용 작성

declare module "*.scss" {
  const content: { [className: string]: string };
  export = content;
}