Cannot find module './*.module.css' or its corresponding type declarations. 에러 핸들링

보통 css를 위해 styled-components를 활용했지만, 간편한 복붙으로 css작성을 위해 남이 작성한 css파일을 긁어와 사용할 때가 있습니다.

 

그럴때는 일일히 styled-components문법으로 바꿔주는것보다 간편하며 네스팅이 가능한 module파일로 바꿔주는것이 낫다고 생각합니다.

 

그래서 복붙한 css파일을 module파일로 바꿔 사용해줬는데 저러 에러가 발생했습니다.

 

typescript가 module에대한 정의를 알 수 없어 발생하는 에러입니다.

 

따라서 typescript에게 module이란 것이 어떤 타입인지 정의해줄 필요가 있습니다.

 

아래는 해결 방법의 순서입니다.

1. 해당 프로젝트의 패키지에 npm install -D typescript-plugin-css-modules 를 설치해줍니다.

 

2. tsConfig파일에서 아래의 옵션을 추가해주세요.

{
  "compilerOptions": {
    "plugins": [{ "name": "typescript-plugin-css-modules" }]
  }
}

 

3. src파일에 global.d.ts파일을 만들고 그 안에 아래의 코드를 작성합니다.

declare module '*.module.css' {
    const classes: { [key: string]: string };
    export default classes;
}

module.css의 정의가 key와 value가 string인 여러개의 속성을 가진 class 객체라는것을 typescript에게 인지시켜주는 것입니다.

위의 단계를 완료하면 더 이상 해당 에러가 발생하지않을 것입니다.