#1 css 파일 내부에서 동적 url 접근할 때 번들링 오류
문제코드
// styles.css
something { background-img:url(../../../some/thing.svg) }
왜 이런 문제가 발생하는 거신가
- 접근하는 경로가 프로젝트의 외부에 있는 공유폴더
- webpack 번들링 할때 룻뜨경로가 어딘가
- 상대경로로 작성된 경우 번들링이 안되는 거신가
- 앵귤러 프로젝트의 경로와 웹팩 설정의 경로... 이런 것들이 꼬이고 꼬여서 그런거신가
이 문제에 대해 어떻게 접근을 해야하는지 도저히 모르겠다.
그래서 간단하게 구글에 css-loader background-img:url 이라고 검색하엿다. css-loader 로 검색하는 이유는 webpack 에서 스타일 관련해서 불러오는 역할을 하는 애라서 그런거시었다.
그래서 저기 4번째 스택오버플로우 글을 들어갔더니 짜잔 역시나 해답이 있었던 거시었다.
ExtractTextPlugin 을 이용하여 경로를 프로젝트 외부의 리소스 디렉토리로 지정하고 번들링을 하였다.
그랬더니 이번에는 다른 오류를 뱉어준다.
#2 Expected 'styles' to be an array of strings.
ExtractTextPlugin을 잘못 이용해서 발생한 오류같다. 검색을 해보았다.
대충 훑어보니 컴포넌트ts 파일에서 styles: [require('./app.component.css')] 이 부분의 문제같은데 실제로는 모든 리소스들을 외부 디렉토리에서 가져올 것이고 저기서 작성한 부분은 임시로 한 것이기 때문에 사실 없어도 된다.
그래서 지우고 새롭게 작성하였다.
해결
- webpack.config.js내의 ExtractTextPlugin을 이용하여 css 파일을 하나의 파일로 만들어서 output 한다.
- 읽어들일 css 파일들을 vendor.ts 내에 require 해준다. (번들링 할때 자동으로 읽어들일 것이다.)
- index.html 의 head 부분에 output 된 css 파일을 import 한다.
- 끗