CSS Modules: 범위가 지정된 스타일

CSS Modules란 무엇인가요?

파일 규칙

/* Button.module.css */
.button {
  background: royalblue;
  color: white;
  padding: 10px 20px;
  border-radius: 4px;
}

CSS Modules 가져오기

import styles from './Button.module.css';

function Button({ children }) {
  return <button className={styles.button}>{children}</button>;
}
// Renders as: class="Button_button__aB2cD" (unique hash)

클래스 조합

/* Button.module.css */
.primary {
  composes: base from "./Base.module.css";
  background: royalblue;
}

전역 클래스

/* styles.module.css */
.container :global(.third-party-class) {
  /* targets third-party className without scoping */
  color: red;
}

Vite에서 CSS Modules 사용

// vite.config.js
export default {
  css: {
    modules: {
      localsConvention: 'camelCase' // .my-class → styles.myClass
    }
  }
}

webpack에서 CSS Modules 사용

{
  loader: 'css-loader',
  options: {
    modules: {
      localIdentName: '[name]__[local]--[hash:base64:5]'
    }
  }
}

클래스 이름 조합

import styles from './Card.module.css';
import clsx from 'clsx';

function Card({ featured }) {
  return (
    <div className={clsx(styles.card, featured && styles.featured)}>
      Content
    </div>
  );
}

실행 시간 비용 없음

TypeScript 지원

CSS Modules와 JS 기반 CSS 비교

빠른 확인

복습