[typescript] cannot find module

타입스크립트를 계속해서 공부 중인데 TodoList를 만들면서 해봐야겠다라는 생각에 간단한 틀을 구성하고 있었다.

1.문제

npm i sass를 설치하고 styles폴더안에 header.modules.scss 파일을 만들었다.

그 안에 Header component 를 감쌀 container역할의 css를 만들고 <Header/>에서 import를 했다.

그런데 오류가 났다.

오류는 2307이라고 떴으며, 찾아보니 모듈을 찾지 못해서 일어난다고 했다.

2.시도

간만에 이런 에러를 만나니 캡쳐해놓는걸 또 깜빡해서 기억나는 것들로 정리.

- 1) npm i --save-dev @types/내파일.js 을 설치 => 해결되지 않음

-2)
declare module "*.module.css" {
  const classes: { [key: string]: string };
  export default classes;
}

위의 코드를 .d.ts파일에 추가하라고 한다. 만들어봤지만 해결 안됨

3.해결
찾은 블로그에서 보니 module로 import를 할때만 발생한다고 한다.

원인은 typescript가 scss파일을 모듈로 인식하지 못해서 발생되는 것같다고 한다. 따라서 scss를 모듈 형식으로 선언해주는 것으로 문제 해결을 봄

1.src 폴더 내에 global.d.ts 파일 생성
2. 파일 내에 밑의 코드 작성
declare module "*.scss" {
  const content: { [className: string]: string };
  export = content;
}

4.후기

어떤 곳은 문제가되는 scss파일이랑 같은 위치에 .d.ts파일을 만들어야된다고 하고, 뭐 다른 방법이 많았는데

다른 것들은 다 안되다가 이 방법은 하자마자 오류가 사라졌다.. 속시원

다음번에도 잊지 않기 위해 기록

참고블로그)

codedive01