Webpack v4升级到v5后React项目样式未生效求助

针对你升级Webpack v5后SCSS样式失效的问题，以下是几个针对性的排查和解决方向：

1. 修复sass-loader与依赖的版本兼容性 #

你的sass-loader@13.1.0版本较高，但搭配的node-sass@4.14.1已停止维护，两者存在兼容性冲突。sass-loader从v12开始官方推荐使用dart-sass（即sass包）替代node-sass。

操作步骤：

# 卸载旧依赖
npm uninstall node-sass
# 安装兼容的dart-sass
npm install sass --save-dev

2. 替换已废弃的react-hot-loader #

react-hot-loader@4已停止维护，与Webpack v5兼容性不佳，可能干扰样式注入和热更新。建议替换为官方推荐的热刷新方案：

操作步骤：

# 卸载旧依赖
npm uninstall react-hot-loader
# 安装新的热刷新依赖
npm install @pmmmwh/react-refresh-webpack-plugin react-refresh react-refresh-typescript --save-dev

修改Webpack配置：

const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');

module.exports = {
  mode: 'development',
  plugins: [new ReactRefreshWebpackPlugin()],
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        exclude: [/(node_modules)/, /\.test.tsx?$/, /\.spec.tsx?$/],
        use: [
          {
            loader: 'ts-loader',
            options: {
              transpileOnly: true,
              allowTsInNodeModules: false,
              onlyCompileBundledFiles: true,
              getCustomTransformers: () => ({
                before: [require('react-refresh-typescript')()],
              }),
            },
          },
        ],
      },
      // 保留原有的SCSS规则
    ],
  },
};

3. 优化CSS Modules配置 #

明确启用CSS Modules并修正importLoaders值（匹配后续loader数量），避免Webpack v5的自动推断问题：

修改css-loader配置：

{
  loader: 'css-loader',
  options: {
    importLoaders: 1, // 对应后续1个sass-loader
    modules: {
      auto: true, // 明确启用CSS Modules
      localIdentName: '[name]__[local]___[hash:base64:5]',
    },
  },
}

4. 完善样式导入的类型支持 #

将require改为ES模块导入，并添加TS类型声明避免报错：

组件中修改导入方式：

import styles from './index.scss';

在src/typings.d.ts中添加类型声明：

declare module '*.scss' {
  const styles: Record<string, string>;
  export default styles;
}

5. 验证dev-server配置 #

确保Webpack dev-server的静态资源配置正确，添加hot选项启用热更新：

module.exports = {
  devServer: {
    static: {
      directory: outPath,
    },
    hot: true,
    open: true,
  },
};

按照上述步骤逐一排查调整，即可解决升级后SCSS样式不生效的问题。

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