CSS 모듈이란?
웹팩을 통해 모듈 번들링을 할 때, 서로다른 컴포넌트가 같은 이름의 css파일을 가지고 있다면,
둘 중 하나의 스타일은 지워지고 다른 하나로 덮어씌워져서 에러가 발생할 것이다.
이를 해결하기 위한게 CSS 모듈이다.
A 라는 컴포넌트가 style.css를 가지고 있고, B라는 컴포넌트가 style.css를 가지고 있다고 한다면,
웹팩을 통해 CSS모듈이 변환되면 A__style__<hashcode> , B__style__<hashcode> 의 형태의 해시값으로 변경된다.
따라서 서로 다른 컴포넌트에서 같은 이름의 css를 사용하더라도, 중복될 걱정없이 사용 가능하게 해주는 것이
CSS 모듈의 역할이다
CSS 모듈을 사용하려면?
웹팩 설정파일에서 css 로더 부분의 옵션에 modules: true를 추가해주면 모듈을 사용할 수 있고
브라우저에서 셀렉터를 보면 해시값으로 변환된 클래스명을 확인 할 수 있다
클래스명을 다른 형태로 출력하고 싶다면,
localIdentName="[path][name]__[local]--[hash: base64: 5]",
옵션을 사용하면 컴포넌트위치-컴포넌트이름__클래스이름--해시값 으로 클래스명이 출력된다.
댓글
댓글 쓰기