خادم Webpack 5 Dev لا يشغل CSS

لقد قمت بإعداد ملف تكوين webpack 5 بسيط مع خادم مطور يبدو أنه يعمل ولكن عندما أقوم بإضافة

<link href="/style.css" rel="stylesheet" />

إلى ملف index.html لم أحصل على تحميل CSS أخترت استخدام "style-loader" عبر "MiniCssExtractPlugin" لتمكين إعادة تحميل 

لا توجد أخطاء في إخراج وحدة تحكم webpack

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
const TerserPlugin = require("terser-webpack-plugin");

module.exports = (env, options) => {
    const mode = options.mode;
    return {
        context: __dirname,
        entry: {
            script: './src/index.bundle.ts',
            style: './src/index.bundle.less',
        },
        output: {
            filename: '[name].js',
            path: path.resolve(__dirname, './src/dist')
        },
        devServer: {
            watchFiles: ['src/**/*.less'],
            static: {
                directory: path.join(__dirname, 'src'),
                watch: true,
            },
            compress: true,
            port: 9000,
            hot: true,
        },
        devtool: 'source-map',
        resolve: {
            extensions: ['.ts', '.tsx', '.js', '.css', '.less']
        },
        plugins: [
            new MiniCssExtractPlugin({
                filename: '[name].css',
                chunkFilename: '[id].css',
                ignoreOrder: false,
            }),
        ],
        module: {
            rules: [{
                    test: /\.js$/,
                    exclude: /node_modules/,
                    use: {
                        loader: 'babel-loader',
                        options: {
                            target: 'browserslist'
                        }
                    }
                },
                {
                    test: /\.ts(x)?$/,
                    loader: 'ts-loader',
                    exclude: /node_modules/
                },
                {
                    test: /\.css$/,
                    use: [
                        mode === 'production' ? MiniCssExtractPlugin.loader : 'style-loader',
                        {
                            loader: 'css-loader',
                        },
                        {
                            loader: 'postcss-loader', // Run postcss actions
                            options: {
                                postcssOptions: {
                                    config: path.resolve(__dirname, "postcss.config.js"),
                                }
                            }
                        },
                    ]
                },
                {
                    test: /\.less$/,
                    use: [
                      mode === 'production' ? MiniCssExtractPlugin.loader : 'style-loader',
                      'css-loader',
                      'less-loader'
                    ]
                },
            ]
        },
        optimization: {
            minimize: true,
            minimizer: [new TerserPlugin(), new CssMinimizerPlugin()]
        },
        target: 'web',
    }
};