Плагин Webpack mini-css-extract-plugin не создает файлы css при сборке

Я пытаюсь настроить mini-css-extract-plugin для создания одного или нескольких файлов CSS из SCSS после сборки, но, похоже, я не очень хорошо знаком с webpack и где-то терплю неудачу.

Используя «webpack»: «^ 4.29.0», «mini-css-extract-plugin»: «^ 0.5.0», мне удалось создать файлы JS, где они должны были быть файлами CSS.

const webpack = require('webpack')

const HtmlWebpackPlugin = require('html-webpack-plugin')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

const isProd = (process.env.NODE_ENV === 'production')

const port = 3000,
    host = 'localhost'

const styles = [
    { loader: isProd? MiniCssExtractPlugin.loader : 'style-loader' },
    {
        loader: 'css-loader',
        options: {
            sourceMap: !isProd,
            modules: true,
        }
    },
    { loader: 'postcss-loader' },
    {
        loader: 'sass-loader',
        options: {
            sourceMap: !isProd,
        }
    }]

module.exports = {
    mode: isProd? 'production': 'development',
    entry: ['@babel/polyfill', './src/index.js'],
    module: {
        rules: [
            {
                test: /\.(sa|sc|c)ss$/,
                exclude: /node_modules/,
                use: styles
            },
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use: ['babel-loader']
            },
            {
                test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
                exclude: /node_modules/,
                use: [{
                    loader: 'file-loader',
                    options: {
                        name: '[name].[ext]',
                        outputPath: 'content/fonts/'
                    }
                }]
            }
        ]
    },
    resolve: {
        extensions: ['.scss', '.js', '.jsx']
    },
    output: {
        path: __dirname + '/dist',
        publicPath: '',
        filename: 'bundle.js'
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new CopyWebpackPlugin([
            { from:'src/content/images', to: 'content/images' },
        ]),
        new HtmlWebpackPlugin({
            template: './src/index.html',
            inject: 'body',
        }),
        new MiniCssExtractPlugin({
            chunkFilename: '[name].css',
            filename: 'styles.css'
        })
    ],
    optimization: {
        splitChunks: {
            chunks: 'all',
            cacheGroups: {
                styles: {
                    name: 'styles',
                    test: /\.(css|sass|scss)$/,
                    chunks: 'all',
                    enforce: true,
                    minChunks: 1,
                    reuseExistingChunk: true,
                }
            }
        }
    },
    devtool: 'source-map',
    devServer: {
        contentBase: './dist',
        hot: true,
        host: host,
        port: port,
        historyApiFallback: true,
        compress: true,
    }
}

Я хочу создать один большой файл CSS или несколько фрагментов CSS и файлов.