react项目引入antd报warning（Failed to parse source map: xxxx URL is not supported）

bug背景

使用yarn start 启动create react app 项目时一直会报几个warning

Failed to parse source map: 'webpack://antd/./components/config-provider/style/index.less' URL is not supported

Failed to parse source map: 'webpack://antd/./components/icon/style/index.less' URL is not supported

Failed to parse source map: 'webpack://antd/./components/locale-provider/style/index.less' URL is not supported

Failed to parse source map: 'webpack://antd/./components/time-picker/style/index.less' URL is not supported

Search for the keywords to learn more about each warning.
To ignore, add // eslint-disable-next-line to the line before.

版本如下

{
  "dependencies": {
  //...
    "antd": "^4.20.2",
    "react": "^18.1.0",
    "react-dom": "^18.1.0",
    "react-redux": "^8.0.1",
    "react-router": "^6.3.0",
    "react-router-dom": "^6.3.0",
    "react-scripts": "5.0.1",
    "redux-persist": "^6.0.0",
  },
  //...
}

原因

查找到相关 issue: https://github.com/ant-design/ant-design/issues/33327

issue下有描述原因： react-script 升级到 5.0.0 之后，所有通过 create-react-app 创建的项目，引入 antd.css 之后都会看到这个警告

解决方案

一开始，按issue中说的将app.tsx中的 import 'antd/dist/antd.css';替换为import 'antd/dist/antd.min.css';，未果。

于是查找，发现项目中有三处地方引入了 import 'antd/dist/antd.css'; 。

尝试如下操作，将三处 import 'antd/dist/antd.css'; 全部替换为import 'antd/dist/antd.min.css'; 后成功去除警告

// import 'antd/dist/antd.css';
import 'antd/dist/antd.min.css';

所以下次遇到此类问题，应当查找文件中所有引入 antd 的地方，然后去除所有的antd.css引入，更改引入为antd.min.css。