webpack: Error with image paths (SASS files)

I was having the same problem, until i realised that I need to use a tilde (~/) in all (S)CSS references instead of (./). This is not well documented in the Vue CLI chapter on static assets.

since the component is in the /components directory, the path should be: ../assets/images/background_test.jpg (notice the two dots)

just try like below. You should add ‘/’ before assets folder (If it is assets folder)

eg. src=“/assets/images/sss.jpg”

I have a similar error with vue-style-loader. Searches show it is webpack. Cannot find ‘module’ when trying to load background image from css/scss as @dimirc. It’s being HOURS and many searches. I don’t know why the example in vue.js package weren’t included?

Two dots same error!

Well, your component is nested 2 folders deep (/components/pages), so you need ../../ to get back to /src.

Please read up on relative paths.

Had the same issue when integrating vue-styleguide with some components that required some fonts from sass file. The solution provided by @mlachance did the trick for me.

For anyone using sass-loader and separate css file (not inside a .vue), the correct solution is what @mlachance wrote. Say your image is src/assets/image.png and your stylesheet is src/style/style.scss, this will work:

background: url(~/../assets/image.png)

if help check this out https://github.com/vuejs-templates/webpack/issues/208#issuecomment-279959781

I have the same problem, I tried to replicate the problem in the project https://github.com/joohncruz/poc-vuejs-webpack-global-style.

• src
  • assets
    • icons (ico_atalho.png)
  • components
    • Hello
    <div class="teste-url">BB</div>
• style
  • styles.scss

styles.scss $auxiliary-color: #1EB6CD ;

.teste-url { background: $primary-color; background-image: url(‘./assets/icons/ico_atalho.png’): }

Error response:

url(‘./assets/icons/ico_atalho.png’): Error response

This relative module was not found:

* ./assets/icons/ico_atalho.png in ./~/css-loader?{"minimize":false,"sourceMap":false}!./~/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-059a7fc7","scoped":false,"hasInlineConfig":false}!./~/sass-loader/lib/loader.js?{"sourceMap":false}!./~/sass-resources-loader/lib/loader.js?{"resources":"D://Projetos//github//poc-vuejs-webpack-global-style//src//assets//styles.scss"}!./~/vue-loader/lib/selector.js?type=styles&index=0!./src/components/Hello.vue