webpack and less how to include images url in css

Question

Just confused with my webpack and less set up best way to include urls for images in my css and have them working in dev and build mode.

Following worked in dev using webpack-devserver but not after build.

.login-container{
  height:100%;
  width:100%;
  background: url('../../images/home3.jpg') no-repeat center center fixed;

And in my config.

plugins.push(
            new HtmlWebpackPlugin({
                template: './src/index.html',
                inject: 'body'
            }),
            // Write out CSS bundle to its own file:
            new ExtractTextPlugin({
                filename: 'css/styles.css',
                allChunks: true})
        );

Also

entry: {
        app: './src/app/app.js'
    },
    devServer: {
        outputPath: path.join(__dirname, 'src'),
        contentBase: "./src"
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        publicPath: isProd ? '' : 'http://localhost:8080/',
        filename: isProd ? 'js/[name].[hash].js' : 'js/[name].bundle.js',
        chunkFilename: isProd ? 'js/[name].[hash].js' : 'js/[name].bundle.js'
    },

In dev it worked fine but after build it was trying to load the images from my css folder

i.e. mysites/css/12424324234234234.jpg

instead of

i.e. mysites/12424324234234234.jpg where the images really was.

Answer 1

Here these solutions posted in the following Github issues might help you.

Github Issues 1

Github Issues 2

The workaround for the process can be done as this

The ExtractTextPlugin need to handle a filename like css/[name].css. As workaround you could use [name].css instead.

set { publicPath: '/' } so that each reference becomes root relative.

OR

you can also use url-loader

You can also check this committed posted by sokra

code loaders: [
            { test: /\.css$/, loader: ExtractTextPlugin.extract(
                "style-loader",
            "css-loader?sourceMap"
            "css-loader?sourceMap",
            {
                publicPath: "../"
            }
            )},
            { test: /\.png$/, loader: "file-loader" }
        ]
    },
    plugins: [
    new ExtractTextPlugin("[name].css?[hash]-[chunkhash]-[name]", {
    new ExtractTextPlugin("css/[name].css?[hash]-[chunkhash]-[name]", {
            disable: false,
            allChunks: true
        }),