首次渲染时MUI与Antd组件无样式问题排查（附Webpack配置）

使用Webpack 5、thread-loader及styled-components注入CSS时，遇到首次渲染MUI和Antd组件无样式的问题，已尝试分析但未找到解决方向，以下是我的Webpack开发环境配置文件：

const webpack = require("webpack");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const path = require("path");
const ProgressBarPlugin = require("progress-bar-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const fs = require("fs");
const lessToJs = require("less-vars-to-js");
var CaseSensitivePathsPlugin = require("case-sensitive-paths-webpack-plugin");
const NodePolyfillPlugin = require("node-polyfill-webpack-plugin");
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
const numOfCpus = require("os").cpus().length;
const outputPath = path.resolve(__dirname, "docs/assets");
const devServerRootPath = path.join(__dirname, "docs");
const publicPath = "/assets/";
const nodeModulesDir = path.join(__dirname, "node_modules");
const indexFile = path.join(__dirname, "src/index.js");
const themeVars = path.join(__dirname, "src/style/antd-theme-overrides.less");
const nodeExternals = require('webpack-node-externals');

const threadLoader = require("thread-loader");

const jsWorkerPool = {
  poolTimeout: 4000,
  workers: numOfCpus - 1,
  workerParallelJobs: 400,
};
threadLoader.warmup({ jsWorkerPool }, [
  "thread-loader",
  "babel-loader",
  "css-loader",
  "sass-loader",
  "less-loader",
]);

// specific antd:
const themeVariables = lessToJs(fs.readFileSync(themeVars, "utf8"));
/* eslint-disable quotes */
// lessToJs does not support @icon-url: "some-string", so we are manually adding it to the produced themeVariables js object here
// themeVariables['@icon-url'] = "'//localhost:3000/src/style/fonts/antd-fonts/iconfont'";
/* eslint-enable quotes */
// #endregion

const config = {
  mode: "development",
  //cheap-module-source-map
  devtool: "cheap-module-source-map",
  entry: {
    app: indexFile,
  },
/*   externalsPresets: { node: false }, // in order to ignore built-in modules like path, fs, etc.
  externals: [nodeExternals()], // in order to ignore all modules in node_modules folder
 */
  resolve: {
    modules: ["src", "node_modules"],
    alias: {
      components: path.resolve(__dirname, "src/components/"),
    },
    extensions: ["*", ".js", ".jsx"],
  },
  stats: { warnings: false },
  output: {
    path: outputPath,
    publicPath,
    filename: "[name].js",
    clean: true,
    chunkFilename: "chunks/[name]-[chunkhash].js",
  },
  module: {
    rules: [
      
      {
        test: /\.css$/,
        use: [
          {
            loader: "thread-loader",
            options: jsWorkerPool,
          },
          "style-loader",
          "css-loader",
        ],
      },
      
      {
        test: /\.s(a|c)ss$/,
        use: [
          {
            loader: "thread-loader",
            options: jsWorkerPool,
          },
          "style-loader",
          "css-loader",
          "sass-loader",
        ],
      },
      {
        test: /\.(js|jsx)?$/,
        exclude: [nodeModulesDir],
        use: [
          {
            loader: "thread-loader",
            options: jsWorkerPool,
          },
          "babel-loader",
        ],
      },
      {
        test: /\.(eot|woff|woff2|ttf|svg|png|jpe?g|gif)(\?\S*)?$/,
        use: [
          {
            loader: "thread-loader",
            options: jsWorkerPool,
          },

          {
            loader: "url-loader",
            options: {
              limit: 100000,
              name: "[name].[ext]",
            },
          },
        ],
      },
      {
        test: /\.less$/,
        use: [
          {
            loader: "thread-loader",
            options: jsWorkerPool,
          },
          "style-loader",
          { loader: "css-loader", options: { importLoaders: 1 } },
          "sass-loader",

          {
            loader: "less-loader",
            options: { javascriptEnabled: true, modifyVars: themeVariables },
          },
        ],
      },
    ],
  },
  watch: true,

  performance: {
    hints: "warning",
  },
  plugins: [
    new HtmlWebpackPlugin({
      filename: "../index.html",
      template: "src/statics/index.html",
    }),
    new ProgressBarPlugin({
      format: "Yükleniyor [:bar] :percent (:elapsed seconds)",
      clear: false,
    }),
    new NodePolyfillPlugin(),
    new webpack.ProvidePlugin({
      Promise: "bluebird",
      jQuery: "jquery",
      $: "jquery",
      React: "react",
    }),
  ],
  devServer: {
    //webpack 4
    compress: true,
    static: path.resolve(__dirname, "docs"),
    port: 8001,
    hot: false,
    historyApiFallback: true,
    client: {
      overlay: {
        errors: false,
        warnings: false,
      },
      
      progress: true,
    },
  },
};

module.exports = config;

内容的提问来源于stack exchange，提问作者Emre Kızıltoprak