如何在 ant-design react app 中使用 ant-design-pro 组件？答案

【问题标题】：How to use ant-design-pro components in ant-design react app?如何在 ant-design react app 中使用 ant-design-pro 组件？
【发布时间】：2019-10-22 14:52:52
【问题描述】：

我已经使用 create-react-app 创建了 react 应用程序并使用了 ant-design 组件，随着项目变得越来越大，我需要使用 ant-design-pro 的一些很棒的组件。

有没有办法将 ant-design-pro 组件集成到现有的 ant-design 项目中？

我尝试导入和使用@ant-design/pro-layout，但对我不起作用。

【问题讨论】：

标签： antd ant-design-pro

【解决方案1】：

V4 参考Upgrade to V4，如果你使用@ant-design/pro-layout，请检查Replace BasicLayout。

对于单个组件，请使用 npm install ant-design-pro@2.3.2 并根据需要导入组件：

import Ellipsis from 'ant-design-pro/lib/Ellipsis';

演示：

【讨论】：

谢谢你的回复，这就是我想要的
导入antd pro组件需要less-loader吗？
我收到此错误 ``` ./node_modules/antd/es/typography/style/index.less 1:0 模块解析失败：意外字符 '@' (1:0) 您可能需要一个合适的加载器来处理这个文件类型。 > @import '../../style/themes/index'; | @import '../../style/mixins/index'; | ```

【解决方案2】：

欢迎来到 Stack Overflow！

看来ant-design团队选择将ant-design-pro组件直接集成到antd中。 ant-design-pro 的版本 2.3.0 是可以用作组件库的库的最新版本。（来源：他们的changelog）。

您可能仍然可以安装该版本（here's the documentation 这样做）。

他们最近发布了ant-design-pro 的v4，我不完全确定您是否可以独立安装这些组件。

不过，ant-design-pro 中的很多组件现在都直接在ant design 内部维护，如您所见here：

在下一个 Pro 版本中，我们将逐步移除所有将添加到 Ant Design 中的组件，这些组件正在开发中：

...

这些组件将在 Ant Design 中得到更全面的支持和维护，Pro 将专注于布局和脚手架。

【讨论】：

感谢您的回复。很有帮助。
我可以在没有less-loader的情况下使用ant design pro组件吗