타입스크립트 CSS Module 오류 해결

타입스크립트에서 CSS Module을 사용하면 모듈/선언을 찾을 수 없다는 타입 에러가 나온다. src 혹은 컴포넌트 폴더에 아래 내용이 담긴 typings.d.ts 파일을 추가하면 해결할 수 있다. via StackOverFlow

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

CSS Module 사용법

1. [name].module.css 형태로 CSS 모듈 파일을 작성하고

   .toggle-bg:after { /* ... */ }
   

2. 컴포넌트에서 아래처럼 사용. CSS 모듈에 정의한 클래스가 kebob-case 라면 class에 접근할 땐 computed property를 사용한다. ex) styles['class-name']

   import styles from './Toggle.module.css' // import 이름 임의 지정 가능
   
   // 컴포넌트 본문의 return문
   // 방법 1 : className 속성에 추가
   return <div className={styles['toggle-bg']} />
   // 방법 2 : classnames 라이브러리 사용시
   return <div className={classnames('bg-white ...', styles['toggle-bg'])} />