13

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!

2 Answers 2

22

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
        })
    ]
};
0
2

Dude, you saved my day useRelativePaths is not even mentioned in the webpack documentation anymore... and, even knowing about it, it still is too confusing, I had too go back one folder and then manually point to the output path again:

"options": {
    outputPath: (url, resourcePath, context) => {
        return `fonts/${url}`;
    },
    publicPath: '../fonts',
    useRelativePaths: true,
    name(resourcePath, resourceQuery) {
        return isDevelopment ? '[path][name].[ext]' : '[contenthash].[ext]'
    },
}

Thanks a lot for having taken the time to come back and answer your own question.

1
  • I'm very happy that it helped you! :-)
    – Mr. B.
    Commented Jan 5, 2021 at 16:24

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.