Webpack Generating Empty CSS Files when module exports array

I'm trying to export 2 different javascript code bundles to create a library. Each has different settings. I saw that I can pass an array to module.exports in webpack to achieve this. It works for the JS, however, the CSS files, when generated, are mostly blank except for a webpack generated comment. It also works correctly if I only pass one of the configs to the module.exports array like this: module.exports = [configLib]; It just doesn't work when I have two items in the array. Any ideas?

This is my webpack.config.js file:

const path = require("path");
const libraryName = "myui";
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

var config = {
    module: {
        rules: [
            // HTML Page Loader
            {
                test: /\.html$/i,
                exclude: /node_modules/,
                use: ["html-loader"]
            },
            // Handlebars Template Loader
            {
                test: /\.hbs$/i,
                use: ["handlebars-loader"]
            },
            // CSS Style Sheet Loader
            {
                test: /\.css$/i,
                use: [
                    MiniCssExtractPlugin.loader,
                    {
                        loader: "css-loader",
                        options: {
                            url: false
                        }
                    },
                ]
            },
            // Sass Style Sheet Loader
            {
                test: /\.s[ac]ss$/i,
                use: [
                    MiniCssExtractPlugin.loader,
                    {
                        loader: "css-loader",
                        options: {
                            url: false
                        }
                    },
                    "sass-loader"
                ]
            },
            // Image Assets
            {
                test: /\.(png|svg|jpg|jpeg|gif)$/i,
                type: "asset/resource",
                generator: {
                    filename: "images/[hash][ext][query]"
                }
            },
            // Favicon
            {
                test: /favicon.ico$/i,
                type: "asset/resource",
                generator: {
                    filename: "favicon.ico"
                }
            },
            // Font Assets
            {
                test: /\.(woff|woff2|eot|ttf|otf)$/i,
                type: "asset/resource",
                generator: {
                    filename: "fonts/[hash][ext][query]"
                }
            }
        ]
    }
};

var configLib = Object.assign({}, config, {
    name: "myUiLibrary",
    entry: {
        // JS
        "my-ui-library": "./my-ui-library/js/main.js",
        errorPages: "./my-ui-library/js/errorPages.js"
    },
    output: {
        path: path.resolve(__dirname, "./wwwroot/dist"),
        filename: "js/[name].js",
        library: libraryName,
        libraryTarget: "var",
        umdNamedDefine: true,
        assetModuleFilename: "assets/[hash][ext][query]"
    },
    plugins: [
        new CleanWebpackPlugin(),
        new MiniCssExtractPlugin({
            filename: "css/[name].css"
        })
    ]
});

var configProject = Object.assign({}, config, {
    name: "webAppTemplate",
    entry: {
        // JS
        projectGlobal: "./src/js/projectGlobalEntry.js",
        home: "./src/js/pages/home.js",
        componentLibrary: "./src/js/pages/componentLibrary.js",
    },
    output: {
        path: path.resolve(__dirname, "./wwwroot/dist"),
        filename: "js/[name].js",
        assetModuleFilename: "assets/[hash][ext][query]"
    }
});

module.exports = [configLib, configProject];

I've tried several different configurations. I'm expecting to have 3 files exported like so:

dist
   css
     errorPages.css
     projectGlobal.css
     my-ui-library.css
   js
     ...
     projectGlobal.js
     my-ui-library.js