Webpack CSS Background Image Not Showing

Question

I'm having problems getting css background images showing when using webpack.

I have the following css class:

.fb {
  display: block;
  width:30px;
  height: 30px;
  background-color: red;
  background-image: url('../images/icons/facebook.png');
}

Usage (Using React so className not class):

<div className="fb"></div>

Below is an image of my 'web_build' folder where webpack bundles all my files into. Highlighted is the culprit image.

The following is the bundles SCSS files which I see in the Network tab of chrome dev tools. No images files show on the 'Img' tab.

.fb {
  display: block;
  width: 30px;
  height: 30px;
  background-color: red;
  background-image: url(1b725f86d1e04faadfad0cda2ac6ee89.png); 
}

All I see rendered is a 30x30px red square.

NOTES:

If I directly reference the image using an <img> tag, the image shows.
I'm using webpack-dev-server
I'm using image-webpack-loader with the following configuration

{
    test: /\.(jpe?g|png|gif|svg|ttf|eot|svg|woff(2)?)$/i,
    loaders: [
        'file?hash=sha512&digest=hex&name=[hash].[ext]',
        'image-webpack?bypassOnDebug&optimizationLevel=7&interlaced=false'
    ]
  },

Let me know if any other information is needed.

Thanks.

SkelDave · Accepted Answer · 2016-07-11 09:13:51Z

2

After some more searching around it turns out that including sourceMap in my CSS/SASS bundling breaks relative image URLs in CSS.

Solution: Turn sourcemaps off or specify a fully qualified publicPath URL.

The following worked for me.

publicPath: 'http://localhost:8080'

More information here https://github.com/webpack/style-loader/issues/55

answered Jul 11, 2016 at 9:13

SkelDave

1,1862 gold badges10 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Pavithra Kodmad · Accepted Answer · 2016-07-10 18:28:50Z

0

The image-webpack-loader only compresses the images using imagemin. Use url-loader or file-loader to load the file into your css.

answered Jul 10, 2016 at 18:28

Pavithra Kodmad

2831 silver badge7 bronze badges

Collectives™ on Stack Overflow

Webpack CSS Background Image Not Showing

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related