1.安装

cnpm i babel-plugin-import --save-dev

2.使用

在根目录下的package.json下的bable中添加相应代码

"babel": {
"presets": [
"react-app"
],
"plugins": [
"transform-runtime",
[
"import",
{
"libraryName": "antd",
"style": "css"
}
]
]
},

3.重启项目  npm start

你就能按需加载antd组件了, 像这样

import { Button } from 'antd';

【react学习二】create-react-app 接入antd 并按需加载组件的更多相关文章

  1. react中使用antd按需加载(第一部)

    什么是react按需加载?简单来说就是当我们引用antd的时候需要引入全局css样式,这会对性能造成一定的影响,那么使用按需加载以后就不需要引入css全局样式了,直接引入功能模块即可,既然需要设置按需 ...

  2. react 使用antd 按需加载

    使用 react-app-rewired 1. 安装react-app-rewired: 由于新的 react-app-rewired@2.x 版本的关系,你还需要安装 customize-cra. ...

  3. 在create-react-app使用less与antd按需加载

    使用antd按需加载 使用react-app-rewired对 create-react-app 的默认配置进行自定义 yarn add react-app-rewired --dev /* pack ...

  4. React引入AntD按需加载报错

    背景:React使用create-react-app脚手架创建,然后yarn run eject暴露了配置之后修改less配置, 需求:实现antd组件按需加载与修改主题. 一开始是按照webpack ...

  5. antd按需加载,配置babel-plugin-import插件,编译后报错.bezierEasingMixin()解决方案

    报错如下: ./node_modules/antd/lib/button/style/index.less (./node_modules/css-loader??ref--6-oneOf-7-1!. ...

  6. react CRA antd 按需加载配置 lessloader

    webpack配置 webpack.config.dev.js, webpack.config.prod同理. 'use strict'; const autoprefixer = require(' ...

  7. react中create-react-app配置antd按需加载(方法二)

    1.yarn add babel-plugin-import 2.在根目录下的package.json下的bable中添加相应代码 "babel": { "presets ...

  8. 配置react / antd 按需加载 并且使用less(react v16)

    1.开启项目   并且执行 yarn eject 下载好我们需要的插件(babel-plugin-import   less  less-loader   antd  react-loadable   ...

  9. 最新版react16.9中按需加载antd和使用less

    使用create-react-app创建应用 yarn create react-app my-app cd my-app yarn start 引入 antd 这是 create-react-app ...

随机推荐

  1. Linux上几款好用的字幕编辑器

    如果你经常看国外的大片,你应该会喜欢带字幕版本而不是有国语配音的版本.我在法国长大,童年的记忆里充满了迪斯尼电影.但是这些电影因为有了法语 的配音而听起来很怪.如果现在有机会能看原始的版本,我想,对于 ...

  2. ABAP 实现内表自定义的F4功能

    “实现多列内容的F4功能 REPORT Z_TAB_TEST.   TYPES: shlp_descr TYPE shlp_descr .   DATA: BEGIN OF itab OCCURS 0 ...

  3. Asp.Net Webform 常用代码

    1015.ASP.Net WebForm 数据绑定 < %# %>   < %= %>   < % %>  < %@ %> Eval("Nam ...

  4. Autumn is deep, alas! I stand on the grass in the shadow of the evergreen trees.

    essence. n. 本质 flush.n. 脸红 v. 刷洗 initiate.v.开始 intrinsic.固执的 mainfest.a.显然的 intuition.n.直觉上的 refrain ...

  5. Neo4j下载与使用

    Neo4j 官网 : https://neo4j.com/ Neo4j 国内: http://neo4j.com.cn/topic/5b003eae9662eee704f31cee http://we ...

  6. Linux 根据端口快速停止服务并启动的办法

    0. 需要使用 lsof 的命令, 如果linux 上面没有安装的话 需要自行安装 yum install lsof or apt-get install lsof 1. 先根据端口查进程号 [roo ...

  7. CF1142B Lynyrd Skynyrd

    题目 有两种做法: 第一种是\(O(nlog\ n)\)的. 我们预处理两个数组: \(pre_i\)表示\(p\)中\(i\)前面的那个数是\(pre_i\). \(lst_i\)表示\(a\)中\ ...

  8. C中的异常处理

    1,C 语言崇尚简洁高效,因此语言本身并没有异常处理的相关语法规则,但是异常处理在 C 语言中 是存在的,我们有必要从 C 语言开始先看一看 C 语言中的异常处理是怎样, 然后对比 C++ 里面的异常 ...

  9. MySQL数据库创建时间和更新时间错乱问题

    在数据中勾选create_time和update_time不为空可以解决更新记录时,create_time也被更新的毛病

  10. python计算1~100的和,1~100奇数的和,1~100偶数的和,一条代码求1~100的和

    1.计算1~100的数之和----for循环实现1~100的和 sum1 = ,): sum1 = sum1 + i i += print(f"1-100之间的和是:{sum1}" ...