[react] "Cannot find module './*.style.scss'"

className을 지정한다음 css를 설정하려고 할때

import styles from "./TodoItem.style.scss";
import cn from "classnames/bind";

이 부분에서 "Cannot find module './TodoItem.style.scss'" 에러가 난 적이 있다.

 

분명 맞는 경로, 파일명도 잘 맞췄다. 근데 모듈을 찾을 수가 없다?

 

알고보니 타입스크립트는 .scss 같은 CSS 파일을 JavaScript 모듈로 처리하지 않기 때문에 정의 파일 (.d.ts)을 만들어줘야 한다는 것이다. 그래야 타입스크립트가 .scss 파일을 객체 형태의 모듈로 인식한다.

 

// src/types/style.d.ts

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

 

만약 파일을 직접 생성하는 대신에, 터미널에 해당 명령어를 실행하면 자동으로 생성된다.

npm install --save-dev @types/classnames