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

最新推荐文章于 2025-05-25 10:34:01 发布

搬砖猴哥

最新推荐文章于 2025-05-25 10:34:01 发布

阅读量1.9k

点赞数 4

CC 4.0 BY-SA版权

分类专栏： react 工具文章标签： react create-react-app

本文链接：https://blog.youkuaiyun.com/weixin_41819098/article/details/88073630

7 篇文章

订阅专栏

4 篇文章

订阅专栏

本文详述了使用create-react-app与Antd构建后台管理系统的常见问题，包括配置Antd按需加载、解决样式失效及调整脚手架配置等步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

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

cnpm i create-react-app -g

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

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

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

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

在创建.babelrc文件

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

最后在项目中引入antd组件

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

当你们看到这的时候，你们会发现，这不正常操作么，没有什么坑啊，但是你会发现antd的样式没有起作用，？？？？满脑子疑问，这里其实错的不是我们，也不是antd，而是这个脚手架，他默认是不使用.babelrc的
所以我们要将配置项暴露出来进行修改npm run eject
此时这个报错，需要将代码利用git提交
```
git add .
git commit -m "init"
```
然后再重新npm run eject 此时应该没问题了
暴露出来之后找到config/webpack.config.js文件，将babelrc：false改为true
还没有完，浏览器还会报错
此时将package.json中的babel下面的 "presets": [ "react-app" ] 配置到 .babelrc中，并将package.json中的babel删除掉

此时大功告成