React项目更新依赖包后SCSS模块样式未加载求助

问题背景 #

更新项目依赖包版本后，CSS模块样式完全未加载，终端无报错，但浏览器中看不到任何样式代码。

相关代码片段 #

样式引入方式 #

import styles from "../WrappersCommon.scss";
// ...
<div className={styles["main-layout"]}>

Webpack SCSS配置 #

test: /.(scss)$/,
use: [
  {
    loader: "css-loader",
    options: {
      modules: {
        localIdentName: "[path][name]__[local]--[hash:base64:5]",
      },
    },
  },
  {
    loader: "postcss-loader",
    options: {
      postcssOptions: {
        plugins: [postcssPresetEnv()],
      },
    },
  },
  "sass-loader",
],

排查方向与解决方法 #

• 缺少样式注入loader：当前配置仅完成了SCSS编译和CSS模块处理，但未配置将样式注入页面的工具。css-loader仅负责把CSS转为JS模块，必须搭配style-loader（开发环境）或mini-css-extract-plugin（生产环境）才能将样式添加到浏览器中。
  开发环境修改示例：

  use: [
    "style-loader", // 新增：将编译后的CSS注入DOM
    {
      loader: "css-loader",
      options: {
        modules: {
          localIdentName: "[path][name]__[local]--[hash:base64:5]",
        },
      },
    },
    {
      loader: "postcss-loader",
      options: {
        postcssOptions: {
          plugins: [postcssPresetEnv()],
        },
      },
    },
    "sass-loader",
  ]
  

  生产环境建议提取CSS为单独文件：

  const MiniCssExtractPlugin = require('mini-css-extract-plugin');
  
  // 新增插件配置
  plugins: [new MiniCssExtractPlugin()],
  
  // loader配置替换style-loader
  use: [
    MiniCssExtractPlugin.loader,
    {
      loader: "css-loader",
      options: {
        modules: {
          localIdentName: "[path][name]__[local]--[hash:base64:5]",
        },
      },
    },
    {
      loader: "postcss-loader",
      options: {
        postcssOptions: {
          plugins: [postcssPresetEnv()],
        },
      },
    },
    "sass-loader",
  ]
  

• loader执行顺序错误：Webpack loader遵循从右到左、从下到上的执行顺序，必须保证编译类loader（sass-loader）在前，处理类loader（postcss-loader、css-loader）在后，样式注入loader在最前面。顺序颠倒会导致CSS模块无法正确解析。

• 依赖版本不兼容：更新依赖后可能出现loader版本冲突，比如css-loader v5+与旧版style-loader不兼容，或postcss-preset-env与postcss-loader版本不匹配。可尝试：

  1. 检查package.json中css-loader、style-loader、sass-loader、postcss-loader的版本兼容性
  2. 删除node_modules和锁文件（package-lock.json/yarn.lock），重新安装依赖

• CSS模块语法问题：检查WrappersCommon.scss中的选择器是否符合规则，比如是否误用:global()导致样式未被模块化处理，或选择器命名含特殊字符导致styles["main-layout"]无法匹配。

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