module을 통해 css 파일 나누기.

import './index.css';

하나만 import 하였고 분명히 import 하지도 않는 css 파일을 적용이 되는 것을 볼수 있다.

이는 상위 js에서 import가 되었을 가능성이 높다.

module 화를 통해서 css를 분리해보자.

 

간단하다. css 파일 명에 module을 붙여준다.

Main.css -> Main.module.css

module을 안붙여주면 적용이 되지 않는다.

그 후에 import를 해준다.

import style from './css/Main.module.css';

className은 다음과 같이 style. 으로 진행하면된다.

<a className={style.MainLogo} href="/">LOLDUO</a>

여러개의 className을 적용시키고 싶다면

className={s.now === selected ? `${style.Champion} ${style.SelectedList} ${style.Selected}`

다음과 같이 ` ` 사이에 $로써 적용시켜주면 된다.