Mini-css-extract-plugin: CSS file resource path is not correct

[huzedong2015]

MCEP Config

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

Build directory

• css
  
  
  
  • style.css
  
  
• fonts
  
  
  
  • xx.woff
  
  

Abnormal

1. style.css font path is css/fonts/xx.woff
2. If filename is set to"[name].css", it is normal

Same problem

Extract-text-webpack-plugin has also encountered this problem before.
Setting publicPath to solve

use: ExtractTextPlugin.extract({
    fallback: "style-loader",
    publicPath: "../"
})

[hfhan]

I also have the same problem. ExtractTextPlugin can set publicPath, so how should MiniCssExtractPlugin be set up?

[huzedong2015]

@hfhanfei
The feeling is not very convenient, but it can solve the problem.

{
    loader: MiniCssExtractPlugin.loader,
    options: {
         publicPath: "../"
    }
}

[alexander-akait]

@huzedong2015 output.publicPath for all webpack assets. Use output.publicPath + filename: 'my/path/to/css/style.css'

[alexander-akait]

And never change publicPath and override in plugins/loaders if your don't know why you need this. Thanks!

[huzedong2015]

@evilebottnawi
publicPath uses the default value (""),The following configuration of the CSS file resource path starts from css/, so the compiled CSS file resource path will have problems, requiring additional configuration publicPath.

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

If the publicPath is set to an absolute path, or if the CSS file is placed in the root directory, no additional processing is required.but I do not want to deal with it.

{
    output: {
        publicPath: "/xxx"
    }
}

// or

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