css-loader, style-loader에 대한 작은 지식들

css-loader, style-loader

css-loader

npm 문서에는 단 한줄로 css-loader를 설명하기 때문에, what, when, how에 대한 궁금증이 남을 수 있다.

The css-loader interprets @import and url() like import/require() and will resolve them.

npm 문서는 최신 배포 버전을 기준으로 설명이 되어있기 때문에 아래의 설명에 대한 부분은 추가적인 설명이 필요하다.

⚠ To use css-loader, webpack@5 is required

css-loader 6버전 부터는 webpack5 환경에서만 작동하기 때문에 webpack@5 버전 미만의 환경에서는 css-loader를 5.2.7 이하 버전을 사용해야 한다.

jsx와 같이 자바스크립트를 이용한 마크업에 스타일링을 입힐 때는 import "global.css" 와 같이 css 파일을 임포트한다. 임포트한다는 말은 css 파일을 하나의 모듈로 취급하여 js,tsx 파일에서 불러 사용한다는 것인데 (babel을 사용하여 import 구문을 require 구문으로 바꾼다) 이렇게 css 파일을 모듈로 부르기 위해서 사용하는 로더가 css-loader이다.

js 파일에서 css 파일을 불러오기 위해 사용하는 로더가 css-loader 이다.

불러온다 라는 말의 의미는 웹팩의 입장에서 보면 의존성 트리에 해당 css 파일안에 있는 내용이 포함된다는 것을 뜻한다.

css-loader는 locally-scoped되는 클래스 이름을 생성하는데도 사용된다.

css modules라고 불리는 컴포넌트 스타일링 방법에서 A.css, B.css가 동일한 클래스 이름을 갖더라도, 실제 브라우저에 적용되는 클래스명은 난수 처리가 되어 클래스 이름이 충돌이 되지 않는데, 아래 파일들이 css-loader에 의해 어떻게 변환되는지 살펴보자.

// A.css
 .wrapper {
 	background-color: blue;
 }
 
// B.css
 .wrapper {
   background-color: pink;
 }

// component.js
import moduleA from "./A.css";
import moduleB from "./B.css";

export default function () {
  return(
    <>
      <div className={A.wrapper}>This should be blue</>
      <div className={B.wrapper}>This should be pink</>
    </>
  )
}

위와 같이 객체 참조가 가능한 것은

A.css, B.css 는 다음과 같이 css-loader에 대해 key 값이 난수화 되기 때문이다.

modulesA = {
  wrapper: "XC0HHIhH77",
}

modulesB = {
  wrapper: "KPYPsVTFZu",
}

빌드타임(혹은 lazy loading을 했을 경우 런타임에서 추가 빌드가 된 후)에 아래처럼 바뀐다.

.XC0HHIhH77 {
  background-color: blue;
}

.KPYPsVTFZu {
  background-color: pink;
}

style-loader

스타일 로더에 대한 설명은 더욱 짤막하다.

Inject CSS into the DOM.

css-loader를 이용해 웹팩 의존성 트리에 추가된 string 값들을 돔에 <style></style> 로 넣어준다. 이를 통해 import 구문을 이용해 각 js 파일에 불러들여진 스타일 파일이 html 파일안에 style 태그로 존재할 수 있게 된다.

따라서 style-loader를 css-loader 없이 사용하는 것은 의미가 없기 때문에 많은 문서들에서 style-loader, css-loader를 함께 묶어서 설명한다.

chaning loaders

웹팩에서 style-loader와 css-loader를 함께 설정할 때 조심해야 하는 부분은, 선언된 순서가 잘못되면 의도한 것처럼 작동하지 않기 때문이다. webpack.config.js를 살펴보자.

다음의 코드에서는 css-loader가 style-loader 다음에 선언되고 있는데, 배열 안에 있는 값들의 역순으로 로더들이 작동하게 된다.

앞서 언급한 대로, style-loader는 css-loader가 .css 확장자의 파일들이 번들링에 포함된 이후에 <style></style> 태그를 이용해 해당 string 값들을 html문서에 적용시킬 수 있기 때문에, 이 순서를 지켜야 한다.

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader"],
      },
    ],
  },
};

본 글이 css-loader, style-loader를 학습하는 사람들에게 도움이 되었으면 좋겠다.

reference
https://medium.com/a-beginners-guide-for-webpack-2/webpack-loaders-css-and-sass-2cc0079b5b3a
https://www.youtube.com/watch?v=L1QMrPsPV5w