Home

I have index.vue, index.scss and index-bg.jpg in the pages directory.

pages/index.vue
pages/index.scss
pages/index-bg.jpg

I tried to set background-image in scss file, but failed.

index.vue:

<style src="./index.scss" lang="scss" module />

index.scss:

body {
  background-image: url(./index-bg.jpg);
}

Error message:

This dependency was not found:

* index-bg.jpg in ./node_modules/css-loader?{"sourceMap":true,"minimize":false,"importLoaders":true,"alias":{"/static":"/xxx/static","/assets":"/xxx/assets"},"localIdentName":"[hash:base64]","modules":true}!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-2a183b29","scoped":false,"hasInlineConfig":true}!./node_modules/sass-loader/lib/loader.js?{"sourceMap":true}!./pages/index.scss

To install it, you can run: npm install --save index-bg.jpg

There are no problems if use ‘~’-based path.

body {
  background-image: url(~/pages/index-bg.jpg);
}

But I want to use relative path in scss file.