Perfect solution to the problem of webpack packaging css background image path

Inside the style tag of the vue component, there is the following CSS code that uses the background image:

background-image: url("../assets/img/icon_add.png");

The parsing configuration of css-loader in webpack is as follows

{
        test: /\.(css|less)$/,
        exclude: path.resolve(__dirname, 'node_modules'),
        use: ['style-loader', 'css-loader', 'less-loader']
    }

After packaging, no css file was found in the dist directory. This is because the css file is converted into a js file.

When you start the project at this time, the background image is imported correctly and can be displayed normally.

2 Extract the css files to a separate file directory

Use mini-css-extract-plugin to extract the css files separately to the css directory under the dist directory.

2.1 Loader configuration

{
        test: /\.(css|less)$/,
        exclude: path.resolve(__dirname, 'node_modules'),
        use: [MiniCssExtractPlugin.loader, 'css-loader', 'less-loader']
    }

2.2 plugin configuration

new MiniCssExtractPlugin({
            filename: 'css/[name][contenthash].css',
        })

After packaging, the dist directory structure is as follows

You can see that the image is in the root directory (dist), but the CSS file is in the dist/css/directory. Now let's take a look at how the packaged CSS file references the image path.

2.3 Packaging results

background-image: url(bb65a86a2fe7669e483a56b970bea421.png);

You can see that there is no bb65a86a2fe7669e483a56b970bea421.png image in the dist/css directory. Therefore, the image cannot be displayed properly. The ideal situation is

background-image: url(../bb65a86a2fe7669e483a56b970bea421.png);

3 Solutions

Change the loader configuration as follows

{
        loader: MiniCssExtractPlugin.loader,
        options:
            // The relative path of the current css file relative to the packaged root path dist publicPath: '../'
        }
    }, 'css-loader', 'less-loader'

Summarize

Separating CSS files leads to CSS background image path errors. The core of the solution is to configure the value of publicPath. The value of publicPath is the relative path value of the file directory where the CSS file is located relative to the root directory. For example, the root path is /, the directory where the css file is located is /css/, so the relative path is..

Unexpected Problems

Why are css files mixed into the bundle.js file after webpack packaging, but images are not mixed into bundle.js? ? ?

This is the end of this article about the perfect solution to the problem of webpack packaging css background image path. For more relevant webpack packaging css background image path content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!