上节课我们学习了antd的基本应用，不知道大家还记不记得我们在举例子的时候遇到了一个问题，就是当我们没有引入样式的时候组件和原生的样子没有什么区别。但是我们引入样式的时候也不能一下把所有组件的样式一下全引入了啊，那么这节课，我们来介绍一下如何按需引入样式。
回顾
在开始这节课的内容之前，我们来对上节课的内容来做一个简单的回顾
ant-design是一个UI组件库，提供一些封装好的组件antd的基本使用不需要大家去背或者死记，用得时候直接来查文档就行了antd中的每一个组件都有相应的API文档，用于做一些偏高级一点的低定制化操作
以上便是上节课的内容，接下来我们来开始这节课的学习
按需引入样式
我们先回到代码中，我们的代码中目前就只用到了一个Button组件是属于antd的，但是我们一下把所有组件的样式全部都引入了，这样做其实是很不合理的，因为一个UI组件库的样式其实是很大的，而我们一下全部引入，现在看好像没什么，当我们要上生产环境的时候，代码一打包就会发现我们打包后的文件这么这么大，所以说我们就要按需引入我们的样式。
那么如何按需引入呢？这个玩意儿我们可不能自己在这瞎猜啊，这么瞎猜猜到什么时候去？我们来看官网给的方法：
首先我们来点击到文档选项，组件选项里面都是教我们怎么去使用组件，而文档选项则是一些代码文档了。但是呢现在我们的版本是4.x，文档其实没有那么详细的，我们建议先去看一下3.x版本的文档。
然后来选择在create-react-app中使用，然后前面这一段都不用管，就是教大家怎么创建react脚手架，怎么安装antd，如果大家看到这一步了还不知道这些步骤怎么完成的话那就说不过去了。我们往下看
我们直接来看高级配置，这里说了主题配置，这一部分内容我们在下一节课再说，我们先来看后面，说我们要对脚手架的默认配置来做一个修改。我们在介绍脚手架文件结构的时候是不是介绍了整个脚手架项目之中所有文件和文件夹。但是那个时候我们有说到默认配置吗？是不是没有？那么文件都在哪呢？这些默认配置都在webpack中，但是为了防止我们不小心误改了配置导致环境崩溃，所以把这些配置都隐藏了，那么我们是不是要把这些文件暴露出来呢？其实并不是，但是如果你艺高人胆大的话，也可以这么干。
那么我们怎么改？我们来看一下官网说的方法，我们既然要修改一个我们根本看不见摸不着的东西，那么我们就要借助一个新的独立的文件，这个文件是我们自己创建的config-overrides.js，放在项目的根目录中。但是我们写了这个是不是就可以了呢？当然不是，我们加了这个文件不代表就被执行了啊。那么我们就要在package.json里面来配置执行机制，让脚手架来执行我们写的js文件，但是我们这个执行的过程中，要依赖两个库react-app-rewired和customize-cra。
那么我们先来安装这两个库吧，npm i react-app-rewired customize-cra，我们把两个库用空格隔开，就可以一条命令同时安装两个库。然后我们修改package.json，然后创建我们来按照官网说的那样创建config-overrides.js文件：
module.exports = function override(config, env) { // do stuff with the webpack config... return config; };
我们来看官方提供的代码，我们用一个函数接收到了配置和环境，然什么都没干返回了这个配置。那这不是改了个寂寞。我们写这个的意义是什么呢？那么我们要怎么来写这个代码呢？
官方又给了相关的介绍，我们要使用babel-plugin-import库，这个库是用于按需加载组件代码样式的babel插件，那么我们安装一下这个库。当然了我们在这里说一下，我们有一个库叫yarn，这个也是个和npm类似的一个包管理工具，我们可以用npm也可以用yarn，但是有一点大家要注意，比如我们之前用得是npm i package这种方式来安装的库，那么就要一直这么用，不能我们用一会儿npm安装然后又改成用yarn安装。这里大家做一个了解就好了。
那么我们现在库也安装好了，再跟着官方来改一下代码吧，这里代码就在截图里面，我就不贴了，我来讲一下这些代码前面的加号和减号是什么意思。加号就是新增这一行代码，减号就是删除掉文件中原有的这一行代码。
那么这样就行了吗？其实官方文档中后面还写了一些东西，其实那一块我们不需要太关注，我们现在只需要把App.js中的样式引入的那一行代码给删掉就可以了。然后启动脚手架。
这次我们的样式是不是也出来了？这一次也并没有引入全部样式，以上便是按需引入antd样式的内容
总结
- 不能一次性直接引入所有
UI组件的样式，需要按需引入 - 按需引入样式需要修改脚手架默认配置
- 我们需要借助
react-app-rewired，customize-cra以及babel-plugin-import库来完成按需引入
Copyright statement：The articles of this site are all original if there is no special explanation, indicate the source please when you reprint.
Link of this article：https://work.lynchow.com/article/import_antd_css_for_need/
