[TS] 타입스크립트에서 CSS Module 사용하기

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

---

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

// Toggle/typings.d.ts
declare module '*.module.css' {
  const classes: { [key: string]: string };
  export default classes;
}

 

CSS Module 사용법

---

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

/* Toggle/Toggle.module.css */
.toggle-bg:after {
  /* ... */
}

 

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

// Toggle/Toggle.tsx
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'])} />;

 

---

글 수정사항은 노션 페이지에 가장 빠르게 반영됩니다. 링크를 참고해 주세요