React.js Boilerplate集成Antd后热重载丢失CSS，硬刷新恢复

问题根源 #

Antd v5默认采用@ant-design/cssinjs实现CSS-in-JS，而你使用的基于React 16.8.6的React Boilerplate，其热重载配置未适配这种动态样式注入逻辑，导致热更新时样式上下文被重置，样式无法重新加载。

可行解决方案 #

1. 固定StyleProvider缓存，避免热重载时重置 #

在项目入口文件（比如src/index.js）里，将Antd的StyleProvider缓存实例全局化，热重载时复用同一缓存，保证样式不丢失：

import { createRoot } from 'react-dom/client';
import { StyleProvider, createCache } from '@ant-design/cssinjs';
import App from './App';

// 全局创建样式缓存，热重载时复用
const styleCache = createCache();

const renderApp = (Component) => {
  const root = createRoot(document.getElementById('root'));
  root.render(
    <StyleProvider cache={styleCache}>
      <Component />
    </StyleProvider>
  );
};

// 首次渲染应用
renderApp(App);

// 修改热重载逻辑
if (module.hot) {
  module.hot.accept('./App', () => {
    const NewApp = require('./App').default;
    renderApp(NewApp);
  });
}

2. 调整webpack热重载配置，兼容Antd的CSS-in-JS模块 #

打开项目的webpack.dev.js配置文件，在JS/JSX的加载规则中，确保不对@ant-design/cssinjs做热重载排除：

module.exports = {
  // ...其他配置项
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules\/(?!@ant-design\/cssinjs)/, // 保留@ant-design/cssinjs的热更新支持
        use: ['babel-loader'],
      },
      // ...其他加载规则
    ]
  }
};

3. 备选方案：降级Antd到v4版本（兼容性更好） #

如果上面的配置修改起来繁琐，可以直接降级Antd到v4版本，它采用传统静态CSS引入方式，和旧版React Boilerplate的热重载兼容性无压力：

npm uninstall antd
npm install antd@4.24.13

之后在入口文件中直接引入Antd全局样式：

import 'antd/dist/antd.css';

验证方法 #

修改配置后，尝试修改JSX文本（比如把“Log In”改成“Sign In”），等待热重载完成后，检查按钮、表单等Antd组件的样式是否正常显示；同时查看控制台是否有样式相关报错，如有则针对性调试。

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