Mini-css-extract-plugin: Handling background images failes for SASS > CSS

[flekschas]

Version: 4.0.0 (node v8.9.0 ; webpack v4.4.1; postcss-loader v2.1.3; css-loader: v0.28.11; autoprefixer v8.2.0; sass-loader v6.0.7)

I am having the following config and try to convert SASS to CSS, process it with PostCSS, and ultimately pass it to MiniCssExtractPlugin:

{
  test: /\.s?css$/,
  use: [
    MiniCssExtractPlugin.loader,
    {
      loader: 'css-loader',
      options: {
        minimize: {
          safe: true
        }
      }
    },
    {
      loader: 'postcss-loader',
      options: {
        plugins: () => [
          require('postcss-flexbugs-fixes'),
          autoprefixer({}),
        ],
      },
    },
    'sass-loader',
  ]
},

Unfortunately, when the following kind of styles cause MiniCssExtractPlugin to complain that it's not able to handle image files:

#test {
  background: url(images/test.png);
}

    [./src/images/test.png] 177 bytes {mini-css-extract-plugin} [built] [failed] [1 error]
        + 2 hidden modules

    ERROR in ./src/images/test.png
    Module parse failed: Unexpected character '�' (1:0)
    You may need an appropriate loader to handle this file type.
    (Source code omitted for this binary file)
     @ ./node_modules/css-loader??ref--6-1!./node_modules/postcss-loader/lib??ref--6-2!./node_modules/sass-loader/lib/loader.js??ref--6-3!./src/index.scss 7:64-92

Is this an issue with the config, some other loader, or a combination with webpack 4?

[flekschas]

Turns out I had to disable url matching and explicitly set publicPath. If anybody else is seeing this check https://github.com/postcss/postcss-loader/issues/160#issuecomment-271082726