Webpack: Error with image paths (SASS files)

[gstrobl]

Hey,
I installed sass-loader and sass-node and everthing works fine, but I have problems with my image paths. I always get this error: Module not found: Error: Can't resolve './assets/images/background_test.jpg' in 'D:\webprojects\gs-portfolio\src\components\pages' @ ./~/css-loader!./~/vue-loader/lib/style-rewriter.js?id=data-v-44c827be!./~/sass-loader/lib/loader.js!./~/vue-loader/lib/selector.js?type=styles&index=0!./src/components/pages/Home.vue 6:73-119

This is my folder structure:
assets
-images
--background_test.jpg
-styles
--main.scss

I didn't changed my webpack config file, I'm very in webpack.

[LinusBorg]

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

[gstrobl]

Two dots same error!

[LinusBorg]

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

Please read up on relative paths.

[gstrobl]

Sorry, I copied the wrong error:

./~/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

I think its a webpack problem.

I imported my main.scss file in App.vue

[LinusBorg]

Module not found: Error: Can't resolve '../../images/background_test.jpg'

Still sounds like the path is incorrect - but as I don't know your project, I can't tell.

[dimirc]

I hava similar issue, when I run npm run dev all is ok, but when running unit test npm run unitI get this error:

ERROR in ./~/css-loader?{"minimize":false}!./~/sass-loader/lib/loader.js?{}!./src/assets/styles/main.scss
Module not found: Error: Can't resolve './assets/img/bg_network_purple.svg' in '/Users/wladimircoka/Documents/Develop/logahub/src/assets/styles'
 @ ./~/css-loader?{"minimize":false}!./~/sass-loader/lib/loader.js?{}!./src/assets/styles/main.scss 7:209572-209617
 @ ./src/assets/styles/main.scss
 @ ./src ^\.\/(?!main(\.js)?$)
 @ ./test/unit/index.js
03 03 2017 01:20:52.238:INFO [karma]: Karma v1.5.0 server started at http://0.0.0.0:9876/
03 03 2017 01:20:52.240:INFO [launcher]: Launching browser PhantomJS with unlimited concurrency
03 03 2017 01:20:52.251:INFO [launcher]: Starting browser PhantomJS
03 03 2017 01:20:53.135:INFO [PhantomJS 2.1.1 (Mac OS X 0.0.0)]: Connected on socket zQeZT4atqRJZ8DNgAAAA with id 75929886
PhantomJS 2.1.1 (Mac OS X 0.0.0) ERROR
  Error: Cannot find module "./assets/img/bg_network_purple.svg"
  at webpack:///src/assets/styles/main.scss:7:0 <- index.js:16980

PhantomJS 2.1.1 (Mac OS X 0.0.0): Executed 0 of 0 ERROR (0.187 secs / 0 secs)

The problem is with the background image at my main.scss but only when testing not in dev:

.background-login {
  background-image: url(assets/img/bg_network_purple.svg);
}

PD: Maybe related to https://github.com/vuejs-templates/webpack/issues/208#issuecomment-271698287

[thomascayne]

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?

[joohncruz]

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
    
    
    BB
  
  
  • 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

[kamiyar]

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

[mlachance]

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.

[eard7]

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.

[arjunkumar7]

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

eg. src="/assets/images/sss.jpg"

[andsav]

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)

[diachedelic]

@andsav Sadly this does not work for me, perhaps because the scss is in another module, see https://github.com/vuejs/vue-cli/issues/5633.

[diachedelic]

Using @import relies on sass-loader's buggy url() handling. This is the correct way to import external styles into a Vue component:

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

[Otabek0626]

I am also having same problem