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

小灰灰 2022-03-15 10:56 328阅读 0赞

今天没事，准备利用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

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的
6.  所以我们要将配置项暴露出来进行修改`npm run eject`  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTgxOTA5OA_size_16_color_FFFFFF_t_70]
7.  此时这个报错，需要将代码利用git提交
    
        git add .
        git commit -m "init"
8.  然后再重新`npm run eject` 此时应该没问题了
9.  暴露出来之后找到config/webpack.config.js文件，将babelrc：false改为true  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTgxOTA5OA_size_16_color_FFFFFF_t_70 1]
10. 还没有完，浏览器还会报错  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTgxOTA5OA_size_16_color_FFFFFF_t_70 2]
11. 此时将package.json中的babel下面的 `"presets": [ "react-app" ]` 配置到 .babelrc中，并将package.json中的babel删除掉  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTgxOTA5OA_size_16_color_FFFFFF_t_70 3]  
    此时大功告成  
    ![在这里插入图片描述][20190302112252412.gif]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTgxOTA5OA_size_16_color_FFFFFF_t_70]: /images/20220315/a44d951d671742f9bf24db5f0f9255c8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTgxOTA5OA_size_16_color_FFFFFF_t_70 1]: /images/20220315/e50cc9c09f17494691ccb3ea640881a3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTgxOTA5OA_size_16_color_FFFFFF_t_70 2]: /images/20220315/2a49f116b78b4bcabd2b6dbba9222d1c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTgxOTA5OA_size_16_color_FFFFFF_t_70 3]: /images/20220315/525b488aa3f74e6590f1d1ad70b9a107.png
[20190302112252412.gif]: /images/20220315/325492b1005c49098832a9d2c1ec1d61.png