Vite CSS 우선순위 문제, 우아한공방의 깔끔한 해결책!
by DD
8개월 전
조회수 26
Vite 환경에서 CSS 우선순위 충돌로 컴포넌트 스타일이 깨지는 문제 발생
VanillaExtract와 Vite Plugin 분석을 통해 CSS 번들링 과정 파악
뱅코멘트와 Reorder Plugin 개발로 CSS 우선순위 문제 영구 해결
Vite CSS 번들링 심층 분석
Vite는 ESM import 규칙을 따라 CSS 파일을 로드하고, VanillaExtract Plugin을 통해 CSS 청크를 생성한다. 구체적으로 Vite Core CSS Plugin은 청크를 순차적으로 결합하여 style.css를 생성한다. 따라서 import 순서가 최종 CSS 결과에 영향을 미치는 구조이다.
뱅코멘트와 Reorder Plugin의 역할
뱅코멘트 Plugin은 각 CSS 청크에 ID를 부여하여 우선순위를 지정한다. Reorder Plugin은 지정된 ID를 기준으로 CSS 청크를 재정렬한다. 반면, 기존 import 순서에 의존하는 방식은 유지보수성 저하와 코드 복잡도 증가라는 단점이 있었다.
CSS 우선순위 문제 해결의 실질적 효과
뱅코멘트와 Reorder Plugin 적용으로 CSS import 순서 의존성을 제거했다. 따라서, 코드 리팩터링 시 CSS 우선순위 문제에 대한 걱정 없이 개발할 수 있다. 결과적으로 스타일 관리 효율성이 향상되고, 디자인 시스템의 안정성을 확보했다.
