1、react+antd 搭建工程 antd按需加载配置_antd yarn start-程序员宅基地

技术标签: antd  react  

1、创建工程

create-react-app bike-antd

2、引入 antd

yarn antd

3、antd组件按需加载配置

此时我们需要对 create-react-app 的默认配置进行自定义,这里我们使用 react-app-rewired (一个对 create-react-app 进行自定义配置的社区解决方案)。

引入 react-app-rewired 并修改 package.json 里的启动配置。由于新的 [email protected] 版本的关系,你需要还需要安装 customize-cra。

$ yarn add react-app-rewired customize-cra

/* 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",
}

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

module.exports = function override(config, env) {
  // do stuff with the webpack config...
  return config;
};

使用 babel-plugin-import#
babel-plugin-import 是一个用于按需加载组件代码和样式的 babel 插件(原理),现在我们尝试安装它并修改 config-overrides.js 文件。

$ yarn add babel-plugin-import

+ const { override, fixBabelImports } = require('customize-cra');

~~- module.exports = function override(config, env) {
-   // do stuff with the webpack config...
-   return config;
- };~~ 
+ module.exports = override(
+   fixBabelImports('import', {
+     libraryName: 'antd',
+     libraryDirectory: 'es',
+     style: 'css',
+   }),
+ );

然后移除前面在 src/App.css 里全量添加的 @import ‘~antd/dist/antd.css’; 样式代码,并且按下面的格式引入模块。

// src/App.js

  import React, { Component } from 'react';
- i~~mport Button from 'antd/lib/button';~~ 
+ import { Button } from 'antd';
  import './App.css';

  class App extends Component {
    render() {
      return (
        <div className="App">
          <Button type="primary">Button</Button>
        </div>
      );
    }
  }

  export default App;

最后重启 yarn start 访问页面,antd 组件的 js 和 css 代码都会按需加载,你在控制台也不会看到这样的警告信息。关于按需加载的原理和其他方式可以阅读这里。

自定义主题#
按照 配置主题 的要求,自定义主题需要用到 less 变量覆盖功能。我们可以引入 customize-cra 中提供的 less 相关的函数 addLessLoader 来帮助加载 less 样式,同时修改 config-overrides.js 文件如下。

$ yarn add less less-loader

 ~~const { override, fixBabelImports } = require('customize-cra');~~ 
+ const { override, fixBabelImports, addLessLoader } = require('customize-cra');

    module.exports = override(
      fixBabelImports('import', {
        libraryName: 'antd',
        libraryDirectory: 'es',
    ~~-   style: 'css',~~ 
    +   style: true,
      }),
    + addLessLoader({
    +   javascriptEnabled: true,
    +   modifyVars: { '@primary-color': '#1DA57A' },
    + }),
    );

这里利用了 less-loader 的 modifyVars 来进行主题配置, 变量和其他配置方式可以参考 配置主题 文档。

修改后重启 yarn start,如果看到一个绿色的按钮就说明配置成功了。

具体参考antd 官网
https://ant.design/docs/react/use-with-create-react-app-cn

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/zyxzp2012/article/details/88763240

智能推荐

html中无序列表的默认样式及其修改:_html中怎么把无序列表的点改成数字-程序员宅基地

文章浏览阅读1.8w次,点赞7次,收藏16次。html中无序列表的默认样式及其修改:在我们进行常规的网页设计的时候经常要用到无序列表;然而在css3中;无序列表是有默认样式的,这些默认样式对我们来说有时候是不合适的。 &lt;ul&gt; &lt;li&gt;列&lt;/li&gt; &lt;li&gt;表&lt;/li&gt; &lt;/ul&gt;从上图可以明显的看出,列表前面有一个很可能没必要存..._html中怎么把无序列表的点改成数字

Elastic:在腾讯云上部署 Elasticsearch 集群_elasticsearch云上部署-程序员宅基地

文章浏览阅读1.1k次。腾讯云(https://cloud.tencent.com/product/es)是基于开源搜索引擎 Elasticsearch 打造的高可用、可伸缩的云端全托管的 Elasticsearch 服务,包含 Kibana 及常用插件,并集成了安全、SQL、机器学习、告警、监控等高级特性(X-Pack)。使用腾讯云 ES,您可以快速部署、轻松管理、按需扩展您的集群,简化复杂运维操作,快速构建日志分析、异常监控、网站搜索、企业搜索、BI 分析等各类业务。在今天的文章中,我将展示如何使用腾讯云来部署 Elast_elasticsearch云上部署

虚拟机内存交换学习个人摘录总结_同一个虚拟机在不同电脑上内存使用 压缩 不一样-程序员宅基地

文章浏览阅读4.4k次。最近在玩虚拟机,看到了VM15选项中设置内存不能过大,否者会发生内存交换。我对此感到疑惑,先开始一番猜测,莫非是主机的内存与虚拟机的内存之间的交换。这个问题可就大了。利用子机攻击母机的套路还是存在的,前几天刚刚看到一篇文章。这让我更加有了兴趣。我想了一下,这种东西应该有前辈发表过吧,我在百度上一搜,发现不止虚拟机会发生内存交换,很多情况也会。但没有一篇搜索结果用的,抨击一波百度,明天Google一..._同一个虚拟机在不同电脑上内存使用 压缩 不一样

[Python爬虫] 5-爬虫进阶(多线程爬虫/动态网页抓取/图形验证码识别)_python实现多线程验证码识别-程序员宅基地

文章浏览阅读728次。# I.多线程爬虫# 1)概念:多线程是为了同步完成多项任务,通过提高资源使用效率来提高系统的效率# 线程:火车的车厢,进程:火车头## 2)threading模块:专门提供用来做多线程编程的模块# tips:可在打印时设置这两个打印内容: # threading.enumerate():查看当前线程的数量 # threading.current_thread():..._python实现多线程验证码识别

Android MediaCodec 硬编码器封装_mediacodec.createencoderbytype("video/avc");-程序员宅基地

文章浏览阅读5.2k次。Android硬编码对手机平台有要求,不同平台支持的视频质量以及是否支持硬编码都不相同。 需要关注inputBufferIndex值 以及outputBufferIndex 是否正常_mediacodec.createencoderbytype("video/avc");

【蒟蒻的Java代码记录系列】时间相关的小工具类_java 记录请求时间工具类-程序员宅基地

文章浏览阅读130次。【代码】【蒟蒻的Java代码记录系列】时间相关的小工具类。_java 记录请求时间工具类

随便推点

Vue3.2 运行时类型检测和运用ts特性的编译时类型检测_vue3 ts 怎么判断字段的类型-程序员宅基地

文章浏览阅读2.9k次。在Vue3内,我们可以在script标签里的export default里添加defineProps这样可以进行一种运行时的声明。运行时声明的写法:<template > <h1>我是DefineProps-Runtime</h1> <h3>你好{{ name }} 现在是{{ time }} 年</h3></template><script setup>defineProps({ ._vue3 ts 怎么判断字段的类型

源码技术分享 计算机毕业设计逆天版Python+Spark智慧城市交通大数据 交通流量预测 交通爬虫 地铁客流量分析 大数据毕业设计 大数据毕设 深度学习 机器学习_大数据技术在智慧交通中的应用爬虫-程序员宅基地

文章浏览阅读1.1k次,点赞4次,收藏26次。大数据毕业设计吊炸天Python+Spark智慧城市交通大数据分析计算机毕业设计吊炸天Python+Spark智慧城市交通大数据分析 大数据毕业设计吊炸天Hadoop+Spark智慧城市交通大数据分析 计算机毕业设计吊炸天Flink+Spark智慧城市交通大数据分析 计算机毕业设计吊炸天Hadoop+Spark智慧城市交通大数据分析_大数据技术在智慧交通中的应用爬虫

多测师肖sir__金牌高级讲师软件测试___疑难杂症之jmeter安装插件后启动闪退_jmeter提示安装库,插件,为什么自动退出了-程序员宅基地

文章浏览阅读202次。报错现象:杭州6期-刘靖(2353502787) 15:07:06An error occurred: org.apache.log.Loggererrorlevel=1请按任意键继续. .杭州6期-刘靖(2353502787) 15:07:16Don’t use GUI mode for load testing, only for Test creation and Test debugging !For load testing, use NON GUI Mode:jmeter _jmeter提示安装库,插件,为什么自动退出了

用二维码搭建设备巡检系统,轻松实现扫码巡检和数字化台账_变电站设备二维码身份csdn-程序员宅基地

文章浏览阅读314次。针对设备状态不透明、纸质记录效率低、故障报修不及时等设备点巡检的常见问题,可以在草料二维码上自主搭建涵盖点检、巡检、报修、维修、保养等功能的管理系统,无需安装APP,微信扫码就能查看设备档案、用表单替代纸质检查表。不管是设备参数、技术资料、联系人等静态信息,还是填写表单、更新状态、编辑可变内容等操作记录,都可以在二维码上展示,作为设备的电子档案。适用于生产设备的点检场景,将二维码作为设备的“数字身份证”,扫码查看设备参数、技术资料、相关责任人,添加点检、维修、保养等记录。_变电站设备二维码身份csdn

前端瓦片地图加载之塞尔达传说旷野之息_js 瓦片地图-程序员宅基地

文章浏览阅读673次,点赞4次,收藏8次。背景最近在 肝???? 塞尔达旷野之息,希望 2022年 新作发布前可以救出公主 ????。 同时公司有地图加载的需求,于是想以 旷野之息 地图为例,学习实践一下前端开发相关的地图知识,本文内容主要介绍通过使用瓦片地图加载原理,实现 塞尔达旷野之息 地图加载并添加交互锚点。基础知识瓦片地图 ????在游戏开发过程中,经常会遇到超过屏幕大小的地图,例如在即时战略游戏中,它使得玩家可以在地图中滚动游戏画面。这类游戏通常会有丰富的背景元素,如果直接使用背景图切换的方式,需要为每个不同的场景准备一张背景图,_js 瓦片地图

Redis搭建及使用-程序员宅基地

文章浏览阅读1.4k次,点赞2次,收藏7次。Redis是C语言开发基于内存结构进行键值对数据存储的、高性能的、非关系型Nosql数据库。用于缓存首页数据1. 缓存作为Key-Value形态的内存数据库,Redis 最先会被想到的应用场景便是作为数据缓存。而使用 Redis 缓存数据非常简单,只需要通过string类型将序列化后的对象存起来即可,不过也有一些需要注意的地方:必须保证不同对象的 key 不会重复,并且使 key 尽量短,一般使用类名(表名)加主键拼接而成。选择一个优秀的序列化方式也很重要,目的是提高序列化的效率和减少内存占用。_redis搭建