升级antd至5.0.0后Less导入报错，该如何替换原有导入语句？

Ant Design 5.x 彻底重构了样式系统，不再基于 Less 实现，而是采用 CSS-in-JS 方案，因此原有的 Less 导入语句会失效，以下是对应替代方式：

1. 全局样式导入 #

Ant Design 5.x 中组件会自动按需引入自身样式，无需手动导入整个包的样式文件。如果需要全局重置样式（比如清除默认边距、统一字体等），可以替换为：

import 'antd/dist/reset.css';

2. 主题定制（替代原 Less 变量覆盖） #

原有的 ~antd/es/style/themes/default.less 变量覆盖方式已废弃，改用 ConfigProvider 组件进行主题配置：

import { ConfigProvider } from 'antd';

// 定义自定义主题，对应原 Less 变量的配置映射到 token 中
const customTheme = {
  token: {
    colorPrimary: '#1890ff', // 对应原 @primary-color
    fontSizeBase: '14px', // 对应原 @font-size-base
    borderRadius: '6px', // 对应原 @border-radius-base
    // 更多主题配置可参考 Ant Design 5.x 官方主题 token 列表
  },
};

function App() {
  return (
    <ConfigProvider theme={customTheme}>
      {/* 你的应用根组件 */}
    </ConfigProvider>
  );
}

注意事项 #

• Ant Design 5.x 不再对外导出 Less 文件，因此无法继续使用原有的 Less 导入和变量覆盖方式。
• 若项目仍需使用 Less 进行自定义样式编写，可以单独维护自己的 Less 文件，但无法再引用 Ant Design 内部的 Less 变量。

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