react脚手架create-react-app配置antd中css按需加载的坑该怎么解决

这篇文章将为大家详细讲解有关react脚手架create-react-app配置antd中css按需加载的坑该怎么解决，文章内容质量较高，因此小编分享给大家做个参考，希望大家阅读完这篇文章后对相关知识有一定的了解。

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

下面是勘误修正后的文章：

想利用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的，它使用的是package.json中的babel配置和内部配置。

上一篇错误文章我们在这里出错后就去修改node_modules了，这是绝对不能做的。

6、所以我们要将脚手架的内部配置项暴露出来进行修改，使用 npm run eject这个命令来暴露配置。但是运行 npm run eject会报出下面的错误：

7、此时这个报错，需要将代码利用git提交

git add .git commit -m "init"

8、然后再重新npm run eject 此时就就不会报上面的错误了，运行npm run eject之后，项目根目录会生成config文件夹

9、找到config/webpack.config.js文件，将babelrc：false改为true，意思是启用.babelrc的配置，如图：

10、还没有完，此时如果运行项目，浏览器还会报错（天了噜，真tm想弃用....)为什么会报错呢？因为上面一步开启了使用.babelrc文件，但是.babelrc的配置不正确，我们需要修改（为什么不正确呢？因为creat-react-app有一些默认的babel配置放到了package.json中）

11、此时将package.json中的babel下面的 "presets": [ "react-app" ] 配置到 .babelrc中，并将package.json中的babel删除掉,如图：

create-react-app的脚手架使用anted的css按需加载，由于此脚手架默认不支持使用.babelrc文件，所以需要将其配置暴露出来，需要用到npm run eject 命令，暴露配置文件后需要在config/webpack.config.js中开启使用.babelrc文件的功能，开启后配置.babelrc。配置的时候需要注意一点，将package.json中的babel配置剪贴到.babelrc中。

关于react脚手架create-react-app配置antd中css按需加载的坑该怎么解决就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。