react脚手架（create-react-app）配置antd中css按需加载的坑

Posted 2021-04-09 nodejs全栈开发

题图 By Clm From Bing

今天没事，准备利用react写一个后台管理系统，但是在刚创建项目引入antd的时候，就遇见了一个神坑！！！

再说坑之前，咱们先来说一下如何利用create-react-app搭建项目和引入ant。

想利用create-react-app搭建基本项目，首先全局应该有这个工具

cnpm i create-react-app -g

在全局安装完之后，就可以利用create-react-app初始化项目了

create-react-app admin('项目名')// 下完包后 进入admin目录cd admin// 然后就可以将项目跑起来yarn start

这样我们就很顺利的完成了react的基本结构搭建

接下来我们就可以在项目中配置antd

1、下载antd

cnpm i antd -S

2、配置antd按需加载css 首先下载babel-plugin-import

cnpm i babel-plugin-import -S

3、再创建.babelrc文件

{ "plugins": [ ["import", { "libraryName": "antd", "style": "css" }]  ]}

4、最后在项目中引入antd组件

import { Button } from 'antd';<Button type="primary">Primary</Button><Button>Default</Button>

5、当你们看到这的时候，你们会发现，这不正常操作么，没有什么坑啊，但是你会发现antd的样式没有起作用，？？？？满脑子疑问，这里其实错的不是我们，也不是antd，而是这个脚手架，他默认是不使用.babelrc的，可以在node_module/react-scripts/config/webpack.config.dev.js中看到

6、所以需要将上图中的false改为true才大功告成

欢迎关注、转发、点击好看