css-loader (2) 썸네일형 리스트형 [Webpack] CSS Module 번들링 Intro. CSS는 기본적으로 전역 속성이기에, 조금만 프로젝트 규모가 커져도 css 식별자 충돌이 자주 발생합니다. 그렇기에 CSS 모듈이란 개념이 탄생하였는데요, 이름 스코프를 로컬하게 쓸 수 있게 해주는 기술입니다. 빌드 프로세스 중, 기존 클래스 혹은 애니메이션 이름을 인코딩하는 형태로 목적을 달성합니다. ex) class='myBox' -> class='1b2uib1ui2b3' 다만, css 다루는 방법도 모르는 웹팩한테 다루는 방법을 알려줘야하는 마당에, 당연하지만 css 모듈에 대해서도 어떤식으로 다뤄야하는지 알려줘야합니다. Goal Method 1. 기존의 css 파일을 번들링하는 방식에 css모듈이 걸리므로, 기존 css방식에서 css모듈은 제외시켜줍니다. rules: [{ test:.. [Webpack] CSS 번들링하기 Intro. 웹팩이 JS , JSON파일들을 번들링해줌으로써, 상당히 많은 문제들이 해결됬습니다. 다만, 이왕 번들링한거 CSS도 같이 번들링 했으면 좋겠습니다. 다만, 웹팩은 기본적으로 JS,JSON밖에 번들링 할 줄 모르기에, 추가적인 셋팅을 해주어야합니다. Goal /* Before */ /* After */ Method 1. JS 파일에, CSS파일을 import 합니다. // [entryfile].js import '../css/index.css'; ... 2. 웹팩에 CSS파일 관련 loader를 받습니다.(style-loader , css-loader) yarn add -D style-loader css-loader css-loader는 웹팩에 CSS파일을 디스크로부터 읽는 법을, sty.. 이전 1 다음
