webpack/webpack

Hi,
after switching from extract-text-webpack-plugin to mini-css-extract-plugin I have some issues with URLs in SCSS / CSS files which are not resolved anymore. These URLs are svg-sprites which are generated with svg-sprite-loader.

Webpack just adds the full path ("/User/...") of in the output css file, but I expect to get the hashed path which webpack creates.

const path = require('path');
const webpack = require('webpack');
const SpritePlugin = require('svg-sprite-loader/plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const { WebpackManifestPlugin } = require('webpack-manifest-plugin');
const StylelintPlugin = require('stylelint-webpack-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const TerserPlugin = require('terser-webpack-plugin');

module.exports = function({manifestConfig, target, commonPlugins, mode}) {

    const plugins = [
        ...
        new SpritePlugin(),
        new MiniCssExtractPlugin({filename: `[name]${manifestConfig ? '-[contenthash]' : ''}.css`}),
        new StylelintPlugin({    "files": ["**/*.scss","!/shops/"],
            "context": path.resolve(__dirname, '../scss/'),
            "fix": true,
            "configFile": path.resolve(__dirname, '../scss/_stylelintrc')
        }),
        ...commonPlugins
    ];

    if (manifestConfig) {
        plugins.push(
                new WebpackManifestPlugin({
                    fileName: manifestConfig.output,
                    seed: manifestConfig.assets,
                    basePath: '/offerpage/',
                    publicPath: '/offerpage/',
                    map: (file) => {
                        // Remove hash in manifest key
                        file.name = file.name.replace(/(-[a-f0-9]{32})(\..*)$/, '$2');
                        return file;
                    },
                })
        )
    }

    return {
        stats: 'minimal',
        devtool: 'source-map',
        entry: {
            myapp: [
                "babel-polyfill",
                path.resolve(__dirname, '../js/es6/myapp.es6.js')
            ]
        },
        output: {
            filename: `[name]${manifestConfig ? '-[chunkhash]' : ''}.js`, // use the properties of entry as name
            path: path.join(target, 'offerpage'),
        },
        optimization: {
            minimizer: [
                new TerserPlugin({
                    parallel: true,
                    sourceMap: true,
                }),
                new CssMinimizerPlugin(),
            ]
        },
        module: {
            rules: [
                ...
                {
                    test: /\.svg$/,
                    // always exclude the following directories in the url-loader below
                    include: [
                        path.resolve(__dirname, "../img/flags"),
                        path.resolve(__dirname, "../img/soop-2682-b-myapp-icons")
                    ],
                    // always exclude the following directories in the url-loader below
                    use: [
                        { loader: 'svg-sprite-loader',
                            options: {
                                extract: true,
                                spriteFilename: pathname => pathname.includes('soop-2682-b-myapp-icons') ?
                                        `images/soop-2682-b-sprite${manifestConfig ? '.[hash]' : ''}.svg` :
                                        `images/sprite${manifestConfig ? '.[hash]' : ''}.svg` },
                        }
                    ]
                },
                {
                    test: /\.(png|jp(e*)g|svg|gif)$/,
                    exclude: [
                        path.resolve(__dirname, "../img/flags"),
                        path.resolve(__dirname, "../img/soop-2682-b-myapp-icons")
                    ],
                    use: [{
                        loader: 'url-loader',
                        options: {
                            limit: 300,
                            name: `images/[name]${manifestConfig ? '-[hash]' : ''}[ext]`
                        }
                    }]
                },
                ...
                {
                    test: /\.scss$/,
                    use: [
                        MiniCssExtractPlugin.loader,
                        'css-loader',
                        'postcss-loader',
                        {
                            loader: 'resolve-url-loader',
                            options: {
                                debug: true
                            }
                        },
                        {
                            loader: 'sass-loader',
                            options: {
                                sourceMap: true,
                                sassOptions: {
                                    sourceMapContents: true
                                }
                            }
                        }
                    ],
                }
            ]
        },

        ...
    };
};