React 按需引入antd组件和样式

最新推荐文章于 2024-08-05 23:30:12 发布
最新推荐文章于 2024-08-05 23:30:12 发布
阅读量1.1k 收藏
点赞数
分类专栏： React 文章标签： react
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq28129019/article/details/115788112
版权
本文介绍了如何在React应用中按需引入antd组件和样式以优化项目体积。首先，下载并添加antd依赖，然后通过react-app-rewired、customize-cra和babel-plugin-import等工具进行配置，修改package.json中的命令，并在src同级目录创建config-overrides.js文件。最后，删除不再需要的全局antd.css引入，实现按需打包。
摘要由CSDN通过智能技术生成

文章目录

1. 下载相关依赖

1.1 添加antd

yarn add antd

1.2 引入antd的 antd.css（不需要执行，后面会删除，仅了解）

  • 可以在src/App.js引入
  • 可以在src/index.js引入
  • 引入内容如下
import "antd/dist/antd.css"
  • 这样引入是把整个antd.css文件引入，antd.css大概60+kb，所以这里有优化空间

2. 添加按需打包工具

2.1 添加依赖配置文件

react-app-rewired 用于启动脚手架

yarn add react-app-rewired

customize-cra 执行修改配置命令

yarn add customize-cra

babel-plugin-import 按需引入组件和样式的babel插件

yarn add babel-plugin-import

2.2 修改package.json配置文件

  • 修改start、build，各种命令的启动方式
  • 修改前
"dependencies": {
   
  "@testing-library/jest-dom": "^5.11.4",
  "@testing-library/react": "^11.1.0",
  "@testing-library/user-event": "^12.1.10",
  "antd": "^4.15.1",
  
最低0.47元/天 解锁文章
神奇洋葱头
关注
专栏目录
react 引入antd 样式_新建react项目全局引入antd样式踩坑
weixin_33626238的博客
12-29 1591
新建了一个react项目，在使用react组件的时候，发现样式不生效。按照官网的单独引入方式可以生效import 'antd/dist/antd.css';下面讲一讲全局引入的方法首先安装babel-plugin-importnpmnpm install babel-plugin-import --save 或 cnpm install babel-plugin-import --saveyarn...
react 引入antd 样式_react项目中使用antd
weixin_40009026的博客
12-19 1255
1.antd官网：https://ant.design/docs/react/introduce-cn2、React中使用Antd1、安装antd npm install antd --save / yarn add antd / cnpm install antd --save2、在您的react项目的css文件中引入 Antd的css@import '~antd/dis...
Ant Design（antd）基础入门
最新发布
www_tlj的专栏
08-05 1496
Ant Design 是由阿里巴巴旗下蚂蚁金服团队开发的企业级 UI 设计语言和 React 实现的组件库。它致力于提高企业级中后台产品的用户体验，并提供统一、简洁、易用的设计和开发规范。以上是如何在 React 项目中安装和配置 Ant Design 的详细步骤。通过使用创建项目，安装 Ant Design 包，并在项目中引入其样式文件和组件，你可以快速在项目中使用 Ant Design 提供的丰富组件库，提升开发效率和用户体验。
antd + react model自定义footer_React系列（一）项目搭建
weixin_39574868的博客
10-27 294
1.使用create-react-app创建一个基于typescript的项目$npxcreate-react-appmyApp--typescript2.进入项目并启动$cdmyApp$npmstart3.引入 antd$npminstallantd--saveindex.css文件中引入样式，组件按需引入即可import'antd/dist/antd.css...
关于react项目引入antd样式的问题
蓝枫秋千的踩坑记录
12-03 2095
创建react项目 安装antd依赖 前两步都没有什么问题,不多说了 这个时候使用antd的组件是这样使用的 import Button from 'antd/es/button'; import './App.css'; 在App.css的文件中还要导入antd/dist/antd.css 用起来特别的麻烦 如何按需导入并且样式自动导入呢? 安装customize-cra $ y...
React 使用 Antd 样式
忘川
05-17 1131
通过 npm 安装antd和babel-plugin-import。 babel-plugin-import是用来按需加载 antd 的脚本和样式的。 npm install antd babel-plugin-import --save 编辑.webpackrc，使babel-plugin-import插件生效。 { "extraBabelPlugins": [...
19. React按需引入 antd 组件和样式 自定义主题
人无远虑,必有近忧.
04-14 158
文章目录1.安装依赖2. 修改 pakcage.json3. 根目录创建config-overrides.js4. 不用在组件中单独引入样式 1.安装依赖 yarn add react-app-rewired yarn add customize-cra yarn add babel-plugin-import yarn add less yarn add less-loader 2. 修改 pakcage.json "scripts":{ "start": "react-app-rewired st
React中使用antd按需引入样式和自定义主题
weixin_52528855的博客
01-14 1638
多个版本的antd在React中的使用
引入antd组件样式，按需引入的高级配置
Hgiao的博客
07-13 691
引入 react-app-rewired 并修改 package.json 里的启动配置。由于新的 react-app-rewired@2.x 版本的关系，你还需要安装 customize-cra。 npm i react-app-rewired customize-cra 修改scripts，eject不用改 /* package.json */ "scripts": { "start": "react-app-rewired start", "build": "react-app-rewi
react项目中引入antd
qq_42672798的博客
08-19 2718
1、安装antd npm install antd --save 2、安装（react-app-rewired）一个对 create-react-app 进行自定义配置的社区解决方案 yarn add react-app-rewired / cnpm install react-app-rewired --save 3、修改 package.json react-scripts 需改为react-app-rewired "scripts": { "start": "react-app-rewired
React引入Antd组件
weixin_34367845的博客
05-28 1412
2019独角兽企业重金招聘Python工程师标准>>> ...
在react项目中引入antd
宫崎骏爷爷的捣蛋野孩子
10-08 6420
在react项目中引入antd 一、antd官网地址 https://ant.design/docs/react/introduce 二、引进antd（直接引入） 1、安装antd npm install antd --save / yarn add antd / cnpm install antd --save 2、在react项目的css文件中引入 Antd的css @import 'antd/dist/antd.css'; 3、看文档使用： 如使用Button： 1、在对应
React中使用Antd组件，直接上干货
m0_57473261的博客
03-30 1703
javascript是前端必要掌握的真正算得上是编程语言的语言，学会灵活运用javascript，将对以后学习工作有非常大的帮助。掌握它最重要的首先是学习好基础知识，而后通过不断的实战来提升我们的编程技巧和逻辑思维。这一块学习是持续的，直到我们真正掌握它并且能够灵活运用它。如果最开始学习一两遍之后，发现暂时没有提升的空间，我们可以暂时放一放。继续下面的学习，javascript贯穿我们前端工作中，在之后的学习实现里也会遇到和锻炼到。真正学习起来并不难理解，关键是灵活运用。
react 按需引入 antd
hbinn_0的博客
11-13 329
npm install antd --save 引入 react-app-rewired 并修改 package.json 里的启动配置npm install react-app-rewired customize-cra --save-dev 将package.json 的 "scripts" 修改为"scripts": { "start": "react-app-rewired start", "build": "react-app-rewired build", ...
react按需导入antd
wenyeqv的博客
10-10 1213
react中比较出名的组件库之一就是ant design，对于初学者，只需要npm下载ant组件库，然后分别导入相应的组件，引入样式即可使用。但是这种方式并不是很好，因为我们使用的组件是有限的，但是却引入了所有的antd样式，造成了性能的浪费，因此我们需要按需引入相应的组件。 这里纪录一下，如何不用webpack，只在原有的create-react-app创建的目录下面，按需引入antd组件 第一步肯定需要安装antd对应的组件库，这里不做过多描述 安装相应的插件，用来覆盖create-react.
React中使用antd
qq_46026593的博客
04-22 384
Ant Design官网。
React中使用Antd组件
2401_84094029的博客
04-07 445
代码能力一定要注重，尤其是很多原理性的代码（之前两次让我写过Node中间件，Promise.all，双向绑定原理，被虐的怀疑人生）！尽量从面试官的问题中表现自己知识的深度与广度，让面试官发现你的闪光点！style: true, //一定要把style变成true!一定不要死记硬背，要理解原理，否则面试官一深入就会露馅！我是antd的按钮哦。我是antd的按钮哦。Antd的自定义主题。theme.js文件。
react 引入antd 样式_React 实战详解 - 从react小白到大白
weixin_39789690的博客
12-30 658
使用create-react-app 脚手架一 通过create-react-app脚手架 搭建项目首先全局安装 create-react-app 脚手架： yarn add -g create-react-app通过create-react-app新建一个项目 npx create-reate-app my-app --typescriptyarn start 可以发现项目正常启动了二 使用sa...
React之使用antd组件
学习笔记
09-04 2319
进入网页点击组件就可以看到网页需要的各种配件，如按钮、导航栏等等，并且配有各种使用方法的API，目前已经更新到4.22版本，原本是只支持react不过后来也支持vue了。antd 是基于 Ant Design 设计体系的 React UI 组件库，主要用于研发企业级中后台产品。antd还可以更改主题颜色，按需引入组件的css，不过得小小操作一下，以后需要了再来补。进入组件选一个比较好看的组件，比如我觉得这个导航栏不错。然后选择js的代码，copy到App组件就行了。终于，ul设置一下就可以了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

神奇洋葱头

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值