"module.css" import 에러

 

 

 

 

TypeScript를 사용하면서 module.css파일을 만들어 아래와 같이 import 했더니

 

import styles from "../stlyes/Note.module.css";

 

'../styles/Note.moudle.css' 모듈 또는 해당 형식 선언을 찾을 수 없습니다. 와 같은 에러를 얻게 된다. 

 

일반적으로 css파일을 import 할 때는

import "../Note.css";

 

과 같이 작성하는데  아마 나는 module형식을 사용하면서 에러가 발생한 것 같다.

 

찾아 보니 원인은 TypeScript가 css파일을 모듈로 인식하지 못해서 발생하며 css에 대한 모듈 형식을 따로 선언해줌으로써 문제 해결이 가능했다.

 

- 우선 같은 src폴더 내에 global.d.ts 파일을 생성
- 그리고 아래와 같이 코드를 작성해서 저장

 

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

 

위와 같이 코드를 작성해주면 에러 x

 

 

 

출처 : https://spin.atomicobject.com/2020/06/22/css-module-typescript/