antd 按需加载 + 自定义主题

最新推荐文章于 2024-04-15 20:58:06 发布
最新推荐文章于 2024-04-15 20:58:06 发布
阅读量264 收藏
点赞数
分类专栏： Ant Design React 文章标签： reactjs yarn
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44240581/article/details/109763831
版权

第一种按需加载

  1. yarn add babel-plugin-import
  2. 在package.json里的babel里加入plugin配置，没有babel要npm run eject

package.json

npm run eject报错： This git repository has untracked files or uncommitted changes
删掉根目录下的隐藏文件.git文件夹，重新npm run eject

第二种按需加载

  1. yarn add react-app-rewired customize-cra
  2. yarn add babel-plugin-import
  3. 修改package.json
  4. 根目录下创建文件config-overrides.js

package.json
config-overrides.js

自定义主题

  1. 同上
  2. 同上
  3. 同上
  4. 同上
  5. yarn add less less-loader
    config-overrides.js

启动项目报错
错误信息

less-loader版本问题
yarn remove less-loader
yarn add less-loader@5.0.0

等下吃什么？
关注
专栏目录
【antd】5分钟快速完成antd样式的按需引入以及自定义主题
Coding and studying
07-14 7180
流行开源的React UI组件库：antd UI组件库在使用的过程中，组件是默认按需引入的： 从antd @V4开始，antd配套的icons图标库不集成在antd核心库中，如果需要使用antd配套的icons图标，需要另外安装图标组件包： 使用icons图标时也是默认按需引入的： 但是，官方默认的组件样式却是默认全部引入，使用时需要在组件中引入全部组件样式 如果我们的组件中只需要使用到ant-design一小部分的组件，那么其他组件的样式是不是就浪费了呢，这样的话，浏览器编译css样式时，会出现首屏加载比
react引入antd并配置按需加载和自定义主题
weixin_49094787的博客
04-16 307
下载组件库包 yarn add antd 使用craco对create-react-app进行自定义配置 yarn add @craco/craco 根目录创建craco.config.js文件 /* craco.config.js */ module.exports = { // ... }; 更改package.json "scripts": { "start...
antd按需引入+自定义主题
believet93的博客
03-26 287
1.安装依赖 npm i react-app-rewired customize-cra babel-plugin-import less less-loader 2.修改package.json "scripts": { "start": "react-app-rewired start", "build": "react-app-rewired build", "test": "react-app-rewired test", "eject": "react-scripts eject" }
antd按需加载
全栈攻略
10-22 9400
如：import { Button } from ‘antd’; 的写法是引入了 antd 下所有的模块，这会影响应用的网络性能。 一，可以通过以下的写法来按需加载组件。 import Button from 'antd/es/button'; import 'antd/es/button/style'; // 或者 antd/es/button/style/css 加载 css 文件 二，可以...
antd按需加载及配置自定义antd主题
weixin_42584321的博客
02-22 1261
react+antd 配置按需加载及自定义antd主题 基于create-react-app脚手架开发。 react版本16.13.1；antd版本4.10.3。 按需加载 一、使用 babel-plugin-import 插件 首先讲一下通过 babel-plugin-import 这个插件来实现的按需加载方式。 安装 babel-plugin-import 插件： //npm用户 npm install babel-plugin-import //yarn用户 yarn add babel-plu
react-react集成webpack4和antd按需加载支持配置主题
08-14
在本场景中，我们将深入探讨如何将React与Webpack 4集成，并实现Ant Design的按需加载以及自定义主题配置。这有助于减小打包后的体积，加快页面加载速度，同时赋予开发者对UI风格的个性化定制能力。 一、Webpack 4...
详解在create-react-app使用less与antd按需加载
10-17
以上知识点详细描述了如何在基于 `create-react-app` 的项目中，通过一系列配置和工具，实现 `less` 预处理器的使用以及 `antd` 组件库的按需加载和自定义主题功能。这些步骤不仅提升了项目的性能，也增加了开发的...
antd样式按需加载
jj2320711457的博客
09-18 2432
{ "plugins": [ [ "import", { "libraryName": "antd", "libraryDirectory": "es", "style": "css" // `style: true` 会加载 less 文件 } ] ], "presets": [ .
实现antd的按需加载
weixin_34023863的博客
09-17 1003
引言 create-react-app：是一个创建react项目特别方便的脚手架，他帮我们配置好了各种需要使用的工具，减少了很多工作量。antd：是蚂蚁金服推出的一个很优秀的react UI库，其中包含了很多我们经常使用的组件，对于小白学习react来说十分友好！ 当我们没有进行任何配置直接在这个项目中使用antd库时，会在控制台看到...
Antd按需加载使用配置
qq_60976312的博客
09-13 824
Antd按需加载使用配置
Antd使用最简单的方式实现按需加载
u010663063的专栏
08-04 334
安装core-loader npm i core-loader --save-dev 在webpack配置文件中引入core-loader rules: [ { test: /\.(js|jsx)$/, use: [ { loader: 'babel-loader' }, { loader: 'core-loader' }, ], },
Antd 按需加载、定制主题
qq_40924034的博客
03-27 392
1. 创建react项目 2. 引入antd // cnpm i antd -S 3.
react配置antd按需加载，前端开发工程师面试
最新发布
m0_54816834的博客
04-15 1022
老衲猜测，看完了这段代码，你就去项目里找**.babelrc**文件了，然而你发现，压根就没有！surprise？找到如下文件：node_modules => react-scripts => config => webpack.config.js。react项目默认会不读取此文件，所以你的**.babelrc文件**设置被漠视了，不叼你。如果解决了你的问题，三连一波走起来！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值