react antd 按需引入

迈不过友情╰ 2022-01-23 06:29 431阅读 0赞

# react antd 按需加载实现方式 #

> 以前有人说按照官方文档实现antd按需引入会有些问题,今天亲自尝试了一下,还是没有问题的,  
> 下面时我的具体步骤  
> 码云地址 [https://gitee.com/qiphon/react-antd-AnXuJiaZai/tree/master][https_gitee.com_qiphon_react-antd-AnXuJiaZai_tree_master]

antd 官网配置地址 [https://ant-design.gitee.io/docs/react/use-with-create-react-app-cn][https_ant-design.gitee.io_docs_react_use-with-create-react-app-cn]

包管理器推荐 -> yarn

1.  装包

### 需要下载的包 ###

yarn add antd react-app-rewired customize-cra
    
    yarn add babel-plugin-import --save-dev

1.  修改package.json

/* package.json */
    "scripts": {
    -   "start": "react-scripts start",
    +   "start": "react-app-rewired start",
    -   "build": "react-scripts build",
    +   "build": "react-app-rewired build",
    -   "test": "react-scripts test",
    +   "test": "react-app-rewired test",
    }

1.  项目根目录创建一个 config-overrides.js 用于修改默认配置。

const { override, fixBabelImports } = require('customize-cra');
    
    module.exports = override(
      fixBabelImports('import', {
        libraryName: 'antd',
        libraryDirectory: 'es',
        style: 'css',
      }),
    );

1.  此时，全局引入的css不再需要 `@import '~antd/dist/antd.css';`如果你引用过这个，请删除它

启动项目 yarn start

[https_gitee.com_qiphon_react-antd-AnXuJiaZai_tree_master]: https://gitee.com/qiphon/react-antd-AnXuJiaZai/tree/master
[https_ant-design.gitee.io_docs_react_use-with-create-react-app-cn]: https://ant-design.gitee.io/docs/react/use-with-create-react-app-cn

发表评论取消回复

表情：

评论列表（有 0 条评论，431人围观）

还没有评论，来说两句吧...

相关阅读

相关 react 使用第三方组件 antd 按需加载配置详情

1.安装antd npm install antd --save 2.配置按需加载安装react-app-rewired取代react-scripts,可

Myth丶恋晨/ 2023年07月17日 14:11/ 0 赞/ 13 阅读

相关 react配置antd按需加载

> 安装与全局引用安装 npm install antd --save 使用（以Button组件为例） import React fro

妖狐艹你老母/ 2023年01月18日 14:24/ 0 赞/ 311 阅读

相关 antd按需加载

非按需加载 App.js import { Button } from 'antd'; index.css或者App.css @import '~

朴灿烈づ我的快乐病毒、/ 2023年01月18日 06:47/ 0 赞/ 227 阅读

相关 antd 与 element-ui如何按需引入，以及二者的不同

antd与element-ui作为两个用途广泛的ui框架，均提供了按需引入，毕竟全量引入会导致包体积太大。尤其是当我们只想使用其中几个组件的时候，按需引入就变得更有必要了。

刺骨的言语ヽ痛彻心扉/ 2022年12月29日 02:17/ 0 赞/ 169 阅读

相关初识react（14）—— antd实现按需打包

一、安装 antd： npm install antd 二、安装依赖模块： npm install react-app-rewired

客官°小女子只卖身不卖艺/ 2022年12月03日 09:53/ 0 赞/ 249 阅读

相关 create-react-app中按需引入Ant-Design

先来回顾一下create-react-app脚手架创建项目的方法 //安装create-react-app脚手架 npm i create-react-app

Myth丶恋晨/ 2022年04月02日 17:40/ 0 赞/ 355 阅读

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

今天没事，准备利用react写一个后台管理系统，但是在刚创建项目引入antd的时候，就遇见了一个神坑！！！再说坑之前，咱们先来说一下如何利用create-react-app

小灰灰/ 2022年03月15日 10:56/ 0 赞/ 343 阅读

相关 Antd按需引入【Vue版】

antd给了两种按需导入的，我很想用第一种，但是弄了半天，就是弄不好，就算了。有知道的小伙伴可以在下面留言告诉我 ![在这里插入图片描述][watermark_type_Z

╰+攻爆jí腚メ/ 2022年02月15日 04:43/ 0 赞/ 923 阅读

相关 react antd 按需引入

react antd 按需加载实现方式 > 以前有人说按照官方文档实现antd按需引入会有些问题,今天亲自尝试了一下,还是没有问题的, > 下面时我的具体步骤 >

迈不过友情╰/ 2022年01月23日 06:29/ 0 赞/ 432 阅读

相关按需导入antd/ant-design-vue,Nuxt按需导入antd/ant-design-vue

> 1、所有文章优先发表在个人博客上： [https://www.xdx97.com][https_www.xdx97.com] > 2、后续如果有修改的话，可能忘记更新到

港控/mmm°/ 2021年12月14日 20:57/ 0 赞/ 795 阅读