1
모듈 파일 작성
파일 이름에 .module이 포함되어야 Vite가 CSS 모듈로
처리한다.
CssModulesExample.module.css
.myButton { ... }
.myButton { ... }
2
객체로 import
CSS 클래스 이름은 styles 객체의 속성으로 제공된다.
import styles from './CssModulesExample.module.css'
3
JSX에서 참조
여러 클래스를 섞을 때는 템플릿 리터럴이나 classNames 유틸을 쓴다.
className={`${styles.myButton} ${styles.primary}`}
4
해시 클래스 확인
DevTools에서는 원래 이름이 아니라 고유 이름으로 변환된 결과를 본다.
CssModulesExample_myButton__abc123