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。
