Webpack Css-loader not applying css on screen

Question

I am in the process of upgrading my react pacakages. I upgraded Webpack to V5 and was using css-loader, css-modules (package) and mini-css-extract-plugin. I dont want to use the css-modules since it is bringing a lot of npm secuity issues and there is no patch. So i am now trying to use css-loader. I dont get any webpack errors but the css is not getting applied to UI. Webpack is not generating the css bundle file like its doing for js bundles. Thank you for your help.

Part of Package.json

"css-loader": "^5.2.7",
    "css-minimizer-webpack-plugin": "^3.1.4",
    "https-browserify": "^1.0.0",
    "mini-css-extract-plugin": "^2.2.1",
    "postcss-loader": "^6.2.1",
    "postcss-preset-env": "^7.0.2",
    "postcss-remove-prefixes": "^1.2.0",
    "postcss-unprefix": "^2.1.4",
    "redux-devtools-extension": "^2.13.9",
    "stream-http": "^3.1.1",
    "style-loader": "^3.2.1",
    "terser-webpack-plugin": "^5.1.1",
    "ts-loader": "^5.2.1",
    "typescript": "^3.7.6",
    "typings-for-css-modules-loader": "^1.7.0",
    "webpack": "^5.65.0",

Webpack.confg file

const MiniCssExtractPlugin = require( "mini-css-extract-plugin" );

function cssNameManglingLoader( localIdentName )
{
    return {
        loader: require.resolve('css-loader'),
        options: {
            importLoaders: 1,
            modules: {
                auto: true,
                localIdentName: localIdentName,
                namedExport: true,
                exportLocalsConvention: "camelCase",
            }
        },
    }
}

function WebpackConfiguration(WebpackOptions, mode)
{
   return{
       plugins: [
            new MiniCssExtractPlugin( {
                filename: "[name].style.css"
            } ),
            new webpack.WatchIgnorePlugin( {
                paths: [
                    /css\.d\.ts$/
                ] 
            }),
            new webpack.ProvidePlugin({
                Buffer: ['buffer', 'Buffer'],
            }),
            new webpack.ProvidePlugin({
                process: 'process/browser',
            })
        ],
       module: {
            rules: [
                {
                    test: /\.ts(x?)$/,
                    exclude: /node_modules/,
                    use: [
                        'babel-loader',
                        {
                            loader: 'ts-loader',
                            options: {
                                transpileOnly: true,
                                experimentalWatchApi: true
                            }
                        }
                    ],
                },
                {
                    test: /\.css$/,
                    exclude: [
                        /node_modules/,
                        path.resolve(WebpackOptions.ApplicationDirectory, 'Styles/Raw'),
                    ],
                    use: [
                        MiniCssExtractPlugin.loader,
                        cssNameManglingLoader( WebpackOptions.StyleNaming ),
                        postCssLoader,
                    ]
                },
                {
                    test: /\.css$/,
                    include: /node_modules/,
                    use: [
                        MiniCssExtractPlugin.loader,
                        'css-loader',
                        postCssLoader,
                    ]
                },
                {
                    test: /\.css$/,
                    include: path.resolve(WebpackOptions.ApplicationDirectory, 'Styles/Raw'),
                    use: [
                        MiniCssExtractPlugin.loader,
                        cssNameManglingLoader( '[local]' ),
                        postCssLoader,
                    ]
                },
            ]
        }
   }