CSS Modules

CSS Module 스코프

개발자는 .container, .myButton처럼 평소의 CSS를 작성하지만, 컴포넌트에서는 styles.myButton으로 접근하고 브라우저에는 파일명과 해시가 조합된 고유 클래스가 남는다.

1

모듈 파일 작성

파일 이름에 .module이 포함되어야 Vite가 CSS 모듈로 처리한다.

CssModulesExample.module.css
.myButton { ... }
2

객체로 import

CSS 클래스 이름은 styles 객체의 속성으로 제공된다.

import styles from './CssModulesExample.module.css'
3

JSX에서 참조

여러 클래스를 섞을 때는 템플릿 리터럴이나 classNames 유틸을 쓴다.

className={`${styles.myButton} ${styles.primary}`}
4

해시 클래스 확인

DevTools에서는 원래 이름이 아니라 고유 이름으로 변환된 결과를 본다.

CssModulesExample_myButton__abc123