0

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.

John
  • 32,403
  • 80
  • 251
  • 422

1 Answers1

0

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' ]},
Community
  • 1
  • 1
John
  • 32,403
  • 80
  • 251
  • 422