How to override `webpack.output.publicPath`

[fpsqdb]

this is mini-css-extract-plugin config:

 plugins: [
        new MiniCssExtractPlugin({
            filename: "[name].css",
            publicPath: "../../../"
        })
    ]

but extract-text-webpack-plugin works as expect:

                use: extractStyle.extract({
                    fallback: "style-loader",
                    use: [cssLoader],
                    publicPath: '../../../'
                })

[alexander-akait]

@fpsqdb can you describe use case?

[michael-ciniawsky]

Yep, please provide a use case as this feature was one of the more 'problematic' ones of ETWP and we should very carefully consider all possible ways to solve this else wise (if possible) before adding options.publicPath back to this plugin

[itstrive]

I have the same problem, about background-image,
use url-loader limitoptions, when less than.

when npm run buld, it's result like this:

body{
    background:url(images/bdc52c4172ae217d3d74698729d4e935.jpg) no-repeat;
}

however, want't to be:

body{
    background:url(../images/bdc52c4172ae217d3d74698729d4e935.jpg) no-repeat;
}

How to config this?

---

webpack.config.js:

   module:{
        rules:[
            {
                test:/\.css$/,
                use:[
                    MiniCssExtractPlugin.loader,
                    'css-loader'
                ]
            },
            {
                test:/\.(png|jpg|gif)$/,
                use:[{
                    loader:'url-loader',
                    options:{
                        limit:50,  //it's important
                        outputPath:'images'
                    }
                }]
            }
        ]
    }

    ,plugins:[
        new MiniCssExtractPlugin({
            filename:'css/index.css' //it's important
        })
    ]

[7iomka]

@itstrive, Same issue!
My old sass config for webpack 3x: https://codepen.io/7iomka/pen/pLrbQM?editors=0010
My sass config modified for webpack 4: https://codepen.io/7iomka/pen/EEvyRK?editors=0010
want't to be:
from DEV in sass file I write:
background: url('../../assets/img/catalog/dcp-l5500dn/dcp-l5500dn-sm.jpg');

In webpack v3 we written something like this:

use: ExtractTextPlugin.extract({
                       publicPath: '../',
                       fallback: 'style-loader',
                       use: ...

In webpack 4 we don't have to pass publicPath: '../', in config, and
Expected result:
background: url(img/dcp-l5500dn-sm.jpg);
But real result is:
background: url(/img/dcp-l5500dn-sm.jpg);

Any help?
Thanks!

[acambas]

+1 on this, i have the same issue

[alexander-akait]

Use publicPath option for loader, look here https://github.com/webpack-contrib/mini-css-extract-plugin/blob/master/src/loader.js#L33. Feel free to ping me if it is not help

[troygibb]

@evilebottnawi same issue here. I'm using it like so:

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

But I'm not seeing publicPath being attached to the query object. I.e.

const query = loaderUtils.getOptions(this) || {};

..is logging as an empty object. When I log the loader itself (MiniCssExtractPlugin.loader), it's just a relative path to the loader.js file, so I'm unclear on how to add the option there.

Thanks in advance!

[alexander-akait]

@troygibb looks like feature, PR welcome 👍

[troygibb]

@evilebottnawi nice!! I'll try to get around to it in the next few weeks.

[victordidenko]

{
  test: /\.css$/,
  use: [{
    loader: MiniCssExtractPlugin.loader,
    options: {
      publicPath: '../'
    }
  }, {
    loader: 'css-loader'
  }]
}

looks like working for me

[wadouk]

To make it work:

• use a publicPath in devserver
• use a relative path on the plugin entry (not loader)
• use a relative path in filename in output

[victordidenko]

@wadouk I think you don't understand an issue.

If you use plugin like

new MiniCssExtractPlugin({
  filename:'css/index.css' //it's important
})

then all resources inside CSS file (like background images, fonts) become with wrong urls, they need to be prepended with "../", because your css file inside folder css/.

This is not publicPath on devserver, which completely different thing, and publicPath on plugin entry is not working, as reported by @troygibb . And you don't specify css files and resources as output entry, so you are wrong here too.

[kenjiqq]

Setting publicPath as @victordidenko mentioned worked for me as well

[yisar]

+10086 on this, IIIIIIII have the same issue,too!