CSS Modules 사용하기

CSS Module은 클래스 이름의 중복을 방지하고, CSS 파일을 여러 개로 관리할 때 유용한 방법이다.

 

이를 사용하기 위해서는 프로젝트의 build 시스템이 CSS Modules를 지원해야 한다.
대부분의 bundler(예: webpack)는 CSS Modules를 기본적으로 지원한다.
따라서 먼저 프로젝트에 bundler를 설정하고 구성하자.

 

사용법은 간단한데, css 파일 이름을 생성할 때 이름.module.css 과 같이 네이밍을 하면 된다.

 

React 환경에서 사용 예제

• About.tsx

import styles from "./about.module.css";

export default function About() {
  return (
    <div className={styles.Container}>
      <p className={styles.PhraseText}>Phrase</p>
    </div>
  );
}

• about.module.css

.Container {
  background: rgb(255, 0, 0);
  color: rgb(0, 0, 255);
  padding: 10px;
  margin: 10px;
  border: 1px solid white;
}

.PhraseText {
  font-size: 25px;
}

확인 시, 스타일이 잘 적용된 것을 확인할 수 있다.

또한, 자동으로 클래스의 이름이 생성되어

class="about_Container__iyZhE"

와 같이 클래스 이름이 생성된다.

마지막에 임의의 값이 붙으므로, 클래스 이름이 중복될 염려가 사라진다.