Module not found: Error: Can‘t resolve ‘antd/dist/antd.css‘ in ‘**********‘

问题描述：

• 参考Ant Design官网，创建好react项目之后，使用npm install antd --save命令安装并引入antd：

• 此时package-json中antd版本：

• 修改src/App.js文件，引入antd的按钮组件：

• 编写button按钮代码：

• 项目报错：

• 根据引入路径，查找对应文件：

• 发现antd/dist并没有对应的css文件。

---

问题解决：

• 这里笔者进行了搜索，发现网上大部分解决方案都是先卸载再安装指定版本号的antd，然后项目可以可以正常运行：

• 卸载：
  npm uninstall antd

• 安装：
  npm install antd@^4.24.2

• 安装成功之后，查看package-json中antd对应的版本号：
  

• 此时发现antd/dist已经有对应的css文件：

• 项目正常运行：
  

---

• 然而，历史的车轮滚滚向前，不可能每次都选择回退版本的方式解决问题
• 于是通过阅读官方文档，返现官网中从v4到v5迁移里明确指出：

技术调整
* 弃用 less，采用 CSS-in-JS，更好地支持动态主题。底层使用 @ant-design/cssinjs 作为解决方案。
	*  所有 less 文件全部移除，less 变量不再支持透出。
	*  产物中不再包含 css 文件。由于 CSS-in-JS 支持按需引入，原本的 antd/dist/antd.css 也已经移除，如果需要重置一些基本样式请引入 antd/dist/reset.css。
	*  如果需要组件重置样式，又不想引入 antd/dist/reset.css 从而导致污染全局样式的话，可以尝试在应用最外层使用App 组件，解决原生元素没有 antd 规范样式的问题。

• 链接：Ant Design 从v4到v5迁移
  

通过修改代码：

• 项目即可正常运行：

---

反思感悟

• 这次本来只是一个比较小的问题，习惯性的通过搜索解决问题，但是结果却不如人意。网络上解决问题的文章帖子很多，但是我们应该尝试先去探索原因，再找到对应解决方案，选择其中最合适的用于项目之中。
• 平时要多阅读官方文档，不管是官网还是对应仓库的issue，很多问题别人也遇到过，尽量以官方的文档或者推荐的方式来解决问题，这里引用一下《肖申克的救赎》里的一句话：“救赎之道，就在其中”