Next.js :: module.css

Next.js 에 있는 module.css 사용법에 대해 정리해보았다.

CSS mosules

CSS mosules는 css를 모듈처럼 사용할 수 있는 장점이 있으며 클래스 명에 해쉬 값을 붙여 다시 생성하고, 그 값을 모듈로 내보내서 사용하는 방식으로 클래스 명이 충돌하는 단점을 극복할 수 있다.

 

파일 명

파일 명은 대문자로 시작하는 이름.module.css 로 명하면 된다. ex) Home.module.css

{이름}.module.css

 

사용법

사용할 module.css 파일을 import 해와 className에 적용하면된다.

// index.jsx
import styles from "@/styles/Home.module.css";

export default function Home() {
  return (
    <div className={styles.test}>
      <p>Hello</p>
    </div>
  );
}

/* Home.module.css */
.test {
  padding: 40px 0;
  background-color: pink;
}

 

 

스타일을 여러 개 지정할 경우

`` 백틱을 활용하면 된다.

export default function Home() {
  return (
    <div className={`${styles.test} ${styles.testTwo} layout_size`}>
      <p>Hello</p>
    </div>
  );
}

 

자식에 이어서 스타일 적용

클래스 이름이 자동으로 해싱되어 생성되어 styles이 적용된 자식 태그 중 클래스 명이 부여된 자식에 스타일을 부여하면 적용이 안된다. (ex. .test . title)

이 문제를 해결하기 위해 css modules에서 제공하는 가상 선택자가 있다.

• : global() ⇒ 해당 스타일을 전역 스코프로 만든다. 이는 해당 클래스가 다른 모듈에서도 사용될 수 있음을 의미해 글로벌하게 적용되는 CSS 이다.
• : local() ⇒ 해당 스타일을 로컬 스코프로 만든다. 이는 해당 클래스가 현재 모듈 내에서만( 해당 컴포넌트에서 만)사용될 수 있는 클래스임을 의미합니다.

사용 예시

// index.jsx
export default function Home() {
  return (
    <div className={styles.test}>
      <p className="title">Hello</p>
      <span>Lorem Ipsum is simply dummy text</span>
    </div>
  );
}

/* Home.module.css */
.test {
  padding: 40px 0;
  background-color: pink;
}

.test :global(.title) {
  font-size: 40px;
}

.test span {
  font-size: 20px;
  word-break: keep-all;
}