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

 

TypeScript가 미 적용되어 있던 프로젝트를 타입 스크립트를 적용하고 페이지의 스타일을 Import하니 에러가 호출되었습니다. 우리가 일반적으로 React에서 사용하는 스타일을 Import 하는 방식은 아래와 같습니다.

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

 

하지만 위의 방식으로 스타일을 불러오게 되면TypeScript를 사용할 때 module.scss(혹은 module.css 등)를 import 하게 되면 [ './App.module.scss' 모듈 또는 해당 형식 선언을 찾을 수 없습니다. ]와 같은 에러를 발생시키는데 이 에러는 스타일을 module로 import 할 때만 발생하며, 아래와 같이 스타일을 import 할 때는 발생하지 않습니다.

 

import "./App.scss";

 

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

• src 폴더 내에 global.d.ts 파일 생성
• 파일 내에 아래 내용 작성

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

 

위의 파일을 생성하면 더이상 에러가 나지 않게 됩니다.

감사합니다.

 

 

출처 : https://velog.io/@drrobot409/React-TypeScript-module.scss-import