어떻게 CSS file을 JS file 안에 불러올 수 있을까?

main.js

import '../styles/global.css';

js에서 특정 엘리먼트 또는 전역적인 스타일이 필요할 때 위와 같이 js파일 안에 css파일을 직접 로드하여 사용해본 적이 있을겁니다. 최근의 프론트엔드에서는 React, Vue 등 라이브러리나 프레임워크를 주로 사용해서 프로젝트를 진행하게 되는데요. 보통은 Create React App, Vue cli 등의 CLI 도구를 통해서 보일러 플레이트를 내려받아 추가적인 구현을 하게 되기 때문에 위 처럼 css파일이 로드되는 것이 자연스럽게 느껴질 수 도 있겠습니다. 그러나 원래 되는 것은 없습니다. 보일러 플레이트 안에 포함된 Webpack, Vite, Parcel 등의 모듈 번들러가 그 역할을 대신해주고 있을 뿐입니다.

---

css-loader, style-loader

위 역할을 해주는 도구가 바로 Webpack의 css-loader와 style-loader 인데요. css를 js 파일에 불러오고 적용해주는 것만이 아닙니다.

global.css

@import url('./common.css');

위와 같이 CSS도 모듈화 하여 관리하고 필요한 곳에서 불러와 사용할 수 있는데요. 이 또한 css-loader가 resolve 해주고 있기 때문입니다. 그래서 아래의 장점들을 취할 수 있게 됩니다.

1. 모듈성: 스타일을 모듈화하고, 사용하는 컴포넌트와 직접 연결할 수 있어 관리에 용이합니다.
2. 코드분할: 설정이 지원하는 경우, 앱의 일부만 필요할 때 해당 부분의 CSS만 로드할 수 있습니다.
3. 개발편의성: CSS의 변경사항이 있어도 HMR을 가능하게 합니다.

---

작동원리

css-loader의 역할

a. CSS 파일을 @import로 불러오거나 url()함수를 사용해 참조하는 경로를 해석하고 resource를 Webpack 종속성 그래프에 추가합니다.
b. CSS 모듈 사용시 classname을 고유한 식별자로 변환합니다. 모듈 간 classname의 충돌을 방지하고 컴포넌트 기반 개발에서 스타일 격리를 도와줍니다.

 

style-loader의 역할
c. js 모듈로 변환된 css 모듈을 DOM에 태그 안으로 삽입하여 브라우저가 해석할 수 있게 합니다.

 

작동과정

• js안에서 import '../style.css'와 같은 css를 가져오는 구문을 발견하면 css-loader가 a를 처리함
• css 파일을 js 모듈로 변환하고 그 과정속에서 css-loader가 b를 처리함.
• 변환된 js 모듈은 style-loader에 의해 c를 처리함.