创建项目

npx create-react-app my-app
cd my-app
npm start
1
2
3

引入Antd

官方文档
可以按照官方指引导入
附：
引入新版本的css可能会报错警告,github上有说明可以看一看
引入 min.css

// 引入antd样式
import 'antd/dist/antd.min.css';
1
2

修改webpack配置

直接释放webpack所有配置（不推荐）

一旦释放，无法回退，谨慎使用

第三方插件craco

官方文档

使用方式
下载这个包

yarn add @craco/craco
1

附：
在这里我报了一个错yarn错误The engine “node“ is incompatible with this module
错误原因：
错误是由于node版本不兼容导致的，解决方案就是忽略引擎版本的检查
解决办法：

 yarn config set ignore-engines true
1

在项目根目录创建craco的配置文件：craco.config.js （这个名字是固定的）。
测试-修改@路径
那我们试着配置@路径，在craco.config.js 文件中配置

// 添加自定义配置
const path = require('path')
module.exports = {
    webpack:{
        alias:{
            "@":path.resolve(__dirname,'src')
        }
    }
}

1
2
3
4
5
6
7
8
9
10

还没结束，还需要配置pack.json里面的启动命令

"scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "react-scripts eject"
}
1
2
3
4
5
6

然后就可以启动了，这个时候还会存在一个小问题，就是编辑器（vscode和webstorm 都可以这样配置）可以使用@/,但是没有提示
我们可以在根目录下新建一个jsconfig.js文件

{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@/*": [
        "src/*"
      ]
    }
  },
  "exclude": [
    "node_modules",
    "dist"
  ]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14