[TypeScript] scss module 사용할 때, 발생하는 에러 해결하기

Problem

---

Typescript로 초기 세팅을 마친 후 본격적인 프로젝트에 돌입..!

하자마자 에러가 터졌다

 

scss 사용할 때 module 쓰려고 기존에 사용하던 방식처럼 적용했는데 빠른 에러메세지와 함께

시작부터 발목을 잡아버리는 사태가 벌어졌다.

 

Vscode에서 보니까 '모듈 또는 해당 형식을 찾을 수 없다' 라는 메세지가 나온 것을 발견했는데,

어떻게 해야할지 모르겠어서 바로 구글링을 시전했다.

한 5분정도 구글링을 했을까? 바로 딱 원하는 해결 방법을 찾아내 버렸다 ㅎㅎ

ChatGPT를 사용할 때도 그랬지만, 정확한 질문이 얼마나 중요한지 또 다시 느껴버린 순간이었다.

 

Solution

---

해결 방법은 의외로 간단했다. src 폴더 아래에 하나의 파일을 만들면 됐다.

src 폴더 아래 global.t.ts 파일을 생성한 뒤, 아래 코드를 입력하고 저장하면 해결 됐다.

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

 

- 결과 화면

Vscode에서도 깔끔하게 해당 에러가 사라진 모습을 볼 수 있었다.

아직은 갓 구글링이 아닌가..!

 

참고자료

---

React에서 TypeScript를 적용 후 "module.scss" import 했을 때 에러