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