Webpack & SCSS: how to work with image paths?

Question

I'm trying to set up a basic webpack project. Everything is smooth, except the generated image paths within the generated CSS.

Folder structure:

src/
    assets/
        images/
    js/
    scss/
dist/              
    assets/           <--- generated correctly, incl. images
        images/
    bundle.js
    main.bundle.css   <--- includes "wrong" paths, starting with dist/
index.htm
webpack.config.js

webpack.config.js

var ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
    watch: true,
    entry: ['./src/js/main.js', './src/scss/main.scss'],
    output: {
        filename: 'dist/bundle.js'
    },
    module: {
        rules: [
            { // regular css files
                test: /\.css$/,
                loader: ExtractTextPlugin.extract({
                    use: 'css-loader?importLoaders=1',
                }),
            },
            { // sass / scss loader for webpack
                test: /\.(sass|scss)$/,
                use: ExtractTextPlugin.extract(['css-loader', 'sass-loader'])
            },
            { // images
            test: /\.(png|jpg|gif)$/,
            use: [
                {
                    loader: 'file-loader',
                    options: {
                        name: '[path][name].[ext]',
                        context: path.resolve(__dirname, "src/"),
                        outputPath: 'dist/'
                    }
                }
            ] 
        },
        ]
    },
    plugins: [
        new ExtractTextPlugin({
            filename: 'dist/[name].bundle.css',
            allChunks: true
        })
    ]
};

src/scss/main.scss

@import "./../../node_modules/bootstrap/scss/bootstrap";

body {
    background-image: url('../assets/images/bg.jpg');
}

dist/main.bundle.css

body {
    background-image:url(dist/assets/images/bg.jpg)
}

index.htm

<link rel="stylesheet" href="dist/main.bundle.css">

Problem:

dist/main.bundles.css is already located in dist/, but prefixes the image paths with dist/. There must be a configuration problem on my side.

Any idea? Thanks in advance!

Answer 1

Problem solved by adding publicPath: '../' (docs) and useRelativePaths: true (docs):

module.exports = {
    // ...        
    module: {
        rules: [                 
            { 
                test: /\.(png|jpg|gif)$/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            name: '[path][name].[ext]',
                            context: path.resolve(__dirname, "src/"),
                            outputPath: 'dist/',
                            publicPath: '../',
                            useRelativePaths: true
                        }
                    }
                ] 
            }
        ]
    },
    plugins: [
        new ExtractTextPlugin({
            filename: 'dist/[name].bundle.css',
            allChunks: true
        })
    ]
};