Webpack - background images not loading

Question

I'm fairly new to webpack but having some problems with css-loader or file-loader.

I'm trying to load a background-image but it doesn't work quite right. The background-image isn't shown, even though the devtools show the background-image style.

If I copy the background-image style to the element.style block, everything works fine. Am I making a stupid mistake somewhere?

The body tag should have a background image. The style appears in the developer tools and there are no errors:

I can load the file 5a09e4424f2ccffb6a33915700f5cb12.jpg, but the body has no background.

If I manually copy and paste css line to element.style in the DevTools, everything works:

This happens if I bundle using webpack-dev-server or just webpack and in both Chrome and Firefox.

Other styles, such as body { background-color: red } work fine.

This is the webpack.config.js:

const path = require('path');  module.exports = {     "entry": [         './src/index.js'     ],     "output": {         "path": path.join(__dirname, 'build'),         "filename": "bundle.js"     },     devtool: "source-map",     "module": {         "loaders": [             {                 "test": /\.scss$/,                 "loaders": ["style", "css?sourceMap", "sass?sourceMap"]             },             {                  test: /\.jpg$/,                  loader: "file-loader"              }         ]     },     devServer: {         contentBase: './build'     } }; 

Answer 1

There is currently a bug when using sourceMap with css-loader. Removing sourceMap from your css loader should fix it.

"module": {     "loaders": [         {             "test": /\.scss$/,             "loaders": ["style", "css", "sass?sourceMap"]         },         {              test: /\.jpg$/,              loader: "file-loader"          }     ] } 

Issue is related to: https://github.com/webpack/css-loader/issues/296