scss 파일에서 url 오류날 때 (@import와 src 사용하기)

vue 파일에 스타일시트를 적용하는 방법은 두 가지가 있다. 

하나는 <style></style> 요소 안에 @import를 선언하는 것이고, 

다른 하나는 <style src=""/> 와 같이 src 속성을 사용하는 것이다. 

 

scss 파일을 선언하는 방법 

<!-- /* 1. @import */ -->
<style lang="scss">
@import "../assets/scss/style"
</style>

<!-- /* 2. src */ -->
<!-- relative path --> 
<style lang="scss" src="../assets/styles/style.scss"></style> 
<!-- module path --> 
<style lang="scss" src="my-package/style.scss"></style>

 

똑같이 scss를 적용하는 방법이지만 동작 방식에는 차이가 있다.

@import를 사용하면 vue를 빌드하고 실행할 때 내부적으로 sass-loader 모듈의 buggy url() handling을 사용한다.

반면에 src로 정의하면 파일 자체를 load한다.

 

문제는 다음과 같은 상황에서 발생한다.

css 에서 url(이미지 경로) 속성으로 이미지를 불러올 때, @import 방식을 사용하면 위와 같은 상대경로는 오류가 발생한다.

만약 scss 파일에 url('../../images/background_test.jpg')라는 표현을 썼다면 다음과 같은 오류가 날 것이다.

./~/css-loader!./~/vue-loader/lib/style-rewriter.js?id=data-v-7d52047c!./~/sass-loader/lib/loader.js!./~/vue-loader/lib/selector.js?type=styles&index=0!./src/App.vue
Module not found: Error: Can't resolve '../../images/background_test.jpg' in 'D:\webprojects\gs-portfolio\src'
 @ ./~/css-loader!./~/vue-loader/lib/style-rewriter.js?id=data-v-7d52047c!./~/sass-loader/lib/loader.js!./~/vue-loader/lib/selector.js?type=styles&index=0!./src/App.vue 7:64087-64130
 @ ./~/vue-style-loader!./~/css-loader!./~/vue-loader/lib/style-rewriter.js?id=data-v-7d52047c!./~/sass-loader/lib/loader.js!./~/vue-loader/lib/selector.js?type=styles&index=0!./src/App.vue
 @ ./src/App.vue
 @ ./src/main.js
 @ multi ./build/dev-client ./src/main.js

sass-loader 모듈을 사용한다면 url을 모듈이름으로 인식하는 것 같다.

../ 또는 ./을 사용해 상대경로로 이미지 파일을 로드하고싶다면 @import 말고 src를 사용하면 된다.