create-react-app引入ant design

Posted 2021-12-25 xiaoyaoxingchen

第一步：全局安装 yarn

npm install yarn -g

第二步：安装 antd

yarn add antd

第三步：安装 babel-plugin-import

npm install babel-plugin-import --save-dev

第四步：暴露配置项

npm run eject

发现执行此操作报错了，不管他什么错，接着执行

yarn install

然后执行

npm run eject

此时可以成功 .会自动生成一个config的文件夹,时候我们先配置dev模式

第五步：打开config文件夹下面的webpack.config.dev.js文件

添加一下代码

plugins: [‘transform-runtime‘, [‘import‘, 
   libraryName: ‘antd‘,
   style: ‘css‘
 ]]

但是当你执行npm start 的时候会发现不行 报错了.
那么此时只要是再执行一次npm install 就可以 然后执行

npm start

项目就可以运行啦

第六步：引入css文件

import ‘antd/dist/antd.css‘