웹팩에서 CSS를 모듈처럼 쓰는 방법 - CSS module

웹팩을 쓰면 CSS까지도 모듈로 쓸 수 있다는 장점이 있다.

이게 무슨 말인가.

기존의 CSS는 전역 변수와 다름 없었다.

.any라는 클래스가 있으면 모든 .any에 영향을 줬다.

물론 SCSS의 네스팅을 이용하면 비껴갈 수는 있지만

 

그래서 BEM과 같은 길고 못생긴 class 네이밍을 해야 했다.

.modal__button--active

물론 정확히 네이밍하면 좋은 방법이라고는 생각한다.

자칫하면 작대기로 나눈 위의 세 부분 개념을 사람마다 다르게 해석해서

중구난방이 될 수 있다는 게 문제인듯 하다.

 

이런 난해함을 해결하기 위해 스타일 컴포넌트 등 다양한 스택들이 있지만

본인은 CSS module이 눈에 들어왔다.

그동안 익숙하게 써왔던 CSS와 똑같기 때문이다.

 

가운데에 .module을 붙여 any.module.css라고 이름지으면 준비 끝이다.

 

파일에서 불러오려면 다음과 같이 작성한다.

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

 

만약 CSS 모듈 파일에서 .button {}이라고 클래스를 정의한 게 있다면

styles.button으로 엘리먼트에 CSS 클래스를 할당할 수 있다.

this.element = document.createElement('ul');
this.element.classList.add(styles.nav);

 

여기에 웹팩이? 번들링을 할 때마다 클래스 이름을 중복되지 않는 해시 코드로 바꿔주기 때문에

더이상 전역 변수처럼 까불지 않고 불러온 파일 안에서만 제 역할을 한다.

이제는 유니크한 클래스 이름을 짓느라 덜 고생해도 된다. ㅜㅜ

 

그냥 이렇게만 끝내면 곤란해지는데...

클래스 이름을 해시 코드로 바꿔주다보니 브라우저에서 개발자 모드로 들어가 태그가 있는 곳을 보면

뭐가뭔지 알 수가 없다.

클래스 이름으로 엘리먼트를 더 쉽게 구분할 수 있을 텐데 자체 하드 모드가 돼 버렸다.

좋은 걸 하나 찾았으면 다른 한 가지를 포기해야 하는 걸까.

 

다행히도 웹팩 설정을 아래처럼 해주면 해결할 수 있다.

{
  test: /\.scss$/,
  use: [
    'style-loader', 
    {
      loader: 'css-loader',
      options: {
        modules: {
          localIdentName: '[local]--[hash:base64:5]',
        },
      },
    },
    'sass-loader',  
  ],
},

이전 포스팅에서 use 부분만 달라졌다.

use 배열은 style-loader와 css-loader를 포함하는 객체, sass-loader로 돼 있다.

가운데 css-loader만 더 장황해 졌는다.

옵션을 추가한 셈이다.

 

localIdentName을 보면 hash 코드 앞에 local이 보이고 이 local이 추가 됨으로써

해시 코드 앞에 원래의 CSS 클래스의 이름이 붙게 돼

가독성 있는 태그로 변하게 된다.