Webpack 5 - Error: Module parse failed: Unexpected character '@'

Question

I am attempting to load some .scss files in webpack 5 and then output them as .css files. I have setup my config to take only .scss files as entries and use MiniCssExtractPlugin, css-loader, resolve-url-loader and sass-loader.

Here is my conifg:

{
    target: 'web',
    stats: {
        errorDetails: true
    },
    entry: ScssEntryGenerator.generateStaticEntryPoint(),
    output: {
        filename: '[name].css',
        path: path.resolve(__dirname)
    },
    module: {
        rules: [
            {
                test: /\.scss$/i,
                use: [
                    'css-loader',
                    'resolve-url-loader',
                    {
                        loader: 'sass-loader',
                        options: {
                            sourceMap: true, // <-- !!IMPORTANT!!
                        }
                    },
                    MiniCssExtractPlugin.loader,
                ]
            }
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: '[name].css'
        })
    ],
};

There is an output of js which contains references to .scss files:

var __webpack_exports__ = {};
__webpack_modules__["./Develop/Styles/accessible/site.scss"]();

And there is an error thrown by webpack, as if the sass-loader wasn't used at all:

Error: Module parse failed: Unexpected character '@' (4:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

P.S. If I move MiniCssExtractPlugin.loader to the top of the use array, as in the docs webpack breaks due to files with the same names being outputted and conflicting.