看起来你遇到的问题虽然表面上是插件未注册，但实际是开发环境下CSS加载器的配置冲突以及插件的使用场景不匹配导致的。下面是具体的排查和解决步骤：

核心问题分析 #

你已经在plugins中正确注册了MiniCssExtractPlugin，但错误仍然出现，原因有两点：

1. MiniCssExtractPlugin更适合生产环境，开发环境下使用它的loader会和webpack-dev-server的热更新机制产生冲突，导致loader无法正确识别已注册的插件实例。
2. 你的SCSS规则中使用了file-loader，这和MiniCssExtractPlugin的功能重复，造成了处理逻辑的混乱。

具体解决方法 #

1. 根据构建模式动态选择样式加载器 #

开发环境用style-loader将CSS注入到DOM中（支持热更新），生产环境用MiniCssExtractPlugin.loader提取独立CSS文件（优化性能）。修改你的webpack配置如下：

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = ({ mode } = { mode: "production" }) => {
  console.log(`mode is: ${mode}`);
  const isProduction = mode === "production";
  // 根据模式选择样式加载器
  const styleLoader = isProduction 
    ? MiniCssExtractPlugin.loader 
    : "style-loader";

  return {
    mode,
    entry: "./src/index.tsx",
    output: {
      publicPath: "/",
      path: path.resolve(__dirname, "build"),
      filename: "bundle.js",
    },
    resolve: {
      extensions: [".js", ".jsx", ".css", ".scss", ".ts", ".tsx"],
    },
    module: {
      rules: [
        {
          test: /\.(gif|png|jpe?g|svg)$/i,
          use: [
            { loader: "image-webpack-loader" },
            "url-loader?limit=100000",
          ],
        },
        {
          test: /\.(css)$/,
          use: [
            styleLoader,
            { loader: "css-loader" },
          ],
        },
        {
          test: /\.(sass|scss)$/,
          use: [
            styleLoader,
            { loader: "css-loader", options: { importLoaders: 1, modules: { auto: true } } },
            { loader: "sass-loader", options: { webpackImporter: true } },
          ],
        },
        {
          test: /\.(js|jsx)$/,
          exclude: /node_modules/,
          loader: "babel-loader",
        },
        {
          test: /\.(ts|tsx)$/,
          use: [{ loader: "ts-loader", options: { transpileOnly: true } }],
          exclude: /node_modules/,
        },
      ],
    },
    plugins: [
      new HtmlWebpackPlugin({ template: "./public/index.html", favicon: "./public/favicon.ico" }),
      // 仅在生产环境实例化插件（可选，但更严谨）
      ...(isProduction ? [new MiniCssExtractPlugin({ linkType: "text/css" })] : []),
    ],
    devServer: { open: true },
  };
};

2. 移除SCSS规则中的file-loader #

之前你用file-loader处理SCSS会导致和MiniCssExtractPlugin功能重复，现在统一用动态选择的加载器，所以删除这部分配置即可。

3. 确保开发命令正确设置mode #

在package.json的scripts中，明确给开发服务指定mode：

"scripts": {
  "start": "webpack serve --mode development",
  "build": "webpack --mode production"
}

4. 验证依赖版本兼容性 #

你的mini-css-extract-plugin版本是1.3.6，和webpack-cli4.9.2、webpack-dev-server3.11.1是兼容的，不需要升级依赖。

为什么这样能解决问题？ #

• 开发环境用style-loader避免了MiniCssExtractPlugin和dev-server的热更新冲突，loader也不需要依赖插件实例，自然不会再报“忘记添加插件”的错误。
• 生产环境用MiniCssExtractPlugin提取CSS，保证了生产包的性能优化。
• 统一CSS和SCSS的处理逻辑，消除了规则冲突。

内容的提问来源于stack exchange，提问作者manisha_manoj