Next에서 cssModule 사용하기

nextjs에서 cssModule을 지원한다. ^^;;

웹팩이나 뭐 필요한가 찾아봤는데 그냥 지원하는듯.

 

아무것도 설치하지 않고 하려면 파일 네이밍컨벤션을 지켜야한다.

css파일이름은 '{이름}.module.css' 라고 지어야한다.

 

Auth.module.css

글자색을 red로 바꿔보자.

 

 

css파일을 style로 import해온다.

console.log(style)을 해보면,

{card: "Auth_card__{자동으로 부여}"}

라고 나온다.

css 모듈이 어떻게 작동하는지 엿볼 수 있다.

 

어쨌든 저기 Aut_card__...을 클래스명으로 사용해야하므로,

className={style.클래스명} 으로 설정한다.

 

글자색이 빨간색으로 바뀐 것을 확인할 수 있다.

 

 

 

 

 

참고
- https://nextjs.org/docs/basic-features/built-in-css-support