John John - 2 months ago 24
Sass (Sass) Question

webpack scss background image path error

I have the following rule on line 258 of my style.scss file:

background: url(img/bg-light-grey.gif)


I then run the command
webpack
and it successfully builds. I go to my webpage but I see I don't see the image included on my webpage. I open up chrome debugger and it says that line 258 of my style.scss has:

background: url(build/4932049asdfjaoi3j234.gif)


In my Chrome debugger, I replace that line with absolute url

background: url(http://localhost:8080/experiment/build/4932049asdfjaoi3j234.gif)


And now the image appears.

How do I get webpack to compile the file paths properly for my images? Alternatively, I don't mind stringify or base64encode these things into my bundle.js file. Whatever it takes to get these images to render properly.

Answer

I found the answer here:

Webpack - background images not loading

I had to make a change in my webpack.config.js from

  { test: /\.scss$/, loaders: [ 'style', 'css?sourceMap', 'sass?sourceMap' ]},

to

  { test: /\.scss$/, loaders: [ 'style', 'css', 'sass' ]},