配置react / antd 按需加载 并且使用less(react v16)
1.开启项目 并且执行 yarn eject
下载好我们需要的插件(babel-plugin-import less less-loader antd react-loadable .....)
如果需要设置项目启动端口号 可以在项目文件下 新建.env 文件 在文件里写下:
port = 8889
https = false
2. 打开package.json, 在 babel 里面加上:
"plugins": [["import", { "libraryName": "antd", "style": true }]] //使用antd 允许less
3.在 webpack.config.dev.js , webpack.config.prod.js 中找到 cssRegex 这个变量 修改为:
const cssRegex = /\.(css|less)$/; //包括less文件
4.在 cssRegex 变量的下边 找到 getStyleLoaders 函数 给函数的 loaders 数组增加一个元素 让其调用less-loader解析less
{loader:require.resolve('less-loader'),options:{javascriptEnabled: true //允许通过js调用antd组件}}
'@': paths.appSrc, //通过 @ 定位到src paths 对象里有每个文件的地址引用 可修改
如果你不需要每次启动之后浏览器都打开新页面 那么
找到scripts 文件下 start.js 中的 openBrowser 属性 注释掉下方的调用语句
如果你没有yarn eject 暴露配置 那么你可能需要 react-app-rewired 插件 来覆盖项目原有的配置 可见 高级配置
配置react / antd 按需加载 并且使用less(react v16)的更多相关文章
- 在create-react-app使用less与antd按需加载
使用antd按需加载 使用react-app-rewired对 create-react-app 的默认配置进行自定义 yarn add react-app-rewired --dev /* pack ...
- React引入AntD按需加载报错
背景:React使用create-react-app脚手架创建,然后yarn run eject暴露了配置之后修改less配置, 需求:实现antd组件按需加载与修改主题. 一开始是按照webpack ...
- react中使用antd按需加载(第一部)
什么是react按需加载?简单来说就是当我们引用antd的时候需要引入全局css样式,这会对性能造成一定的影响,那么使用按需加载以后就不需要引入css全局样式了,直接引入功能模块即可,既然需要设置按需 ...
- antd按需加载,配置babel-plugin-import插件,编译后报错.bezierEasingMixin()解决方案
报错如下: ./node_modules/antd/lib/button/style/index.less (./node_modules/css-loader??ref--6-oneOf-7-1!. ...
- react 使用antd 按需加载
使用 react-app-rewired 1. 安装react-app-rewired: 由于新的 react-app-rewired@2.x 版本的关系,你还需要安装 customize-cra. ...
- 【react学习二】create-react-app 接入antd 并按需加载组件
1.安装 cnpm i babel-plugin-import --save-dev 2.使用 在根目录下的package.json下的bable中添加相应代码 "babel": ...
- React Router 按需加载+服务器渲染的闪屏问题
伴随着React协议的『妥协』(v16采用MIT),React为项目的主体,这个在短期内是不会改变的了,在平时使用过程中发现了如下这个问题: 在服务器渲染的时候,刷新页面会出现闪屏的现象(白屏一闪而过 ...
- react路由按需加载方法
使用router4之后以前的按需加载方法require.ensure 是不好使了. 所以我们改用react-loadable插件做按需加载. 第一步: yarn add react-loadable ...
- react antd上拉加载与下拉刷新与虚拟列表使用
创建项目 create-react-app antdReact 安装:antd-mobile.react-virtualized npm i antd-mobile -S npm i react-vi ...
随机推荐
- 删除表中重复数据,只删除重复数据中ID最小的
delete t_xxx_user where recid in ( select recid from t_xxx_user where recid in ( select min(recid) f ...
- nginx Dockerfile
FROM centos MAINTAINER zengxh RUN yum install -y epel-release vim pcre-devel wget net-tools gcc zlib ...
- vue -电子时钟
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Numpy创建数组
# 导入numpy 并赋予别名 np import numpy as np # 创建数组的常用的几种方式(列表,元组,range,arange,linspace(创建的是等差数组),zeros(全为 ...
- 设在起始地址为STRING的存储空间存放了一个字符串(该串已存放在内存中,无需输入,且串长不超过99),统计字符串中字符“A”的个数,并将结果显示在屏幕上。
问题 设在起始地址为STRING的存储空间存放了一个字符串(该串已存放在内存中,无需输入,且串长不超过99),统计字符串中字符"A"的个数,并将结果显示在屏幕上. 代码 data ...
- 经验分享:一个 30 岁的人是如何转行做程序员,进入IT行业的?
大约一年以前,我成为了一名全职开发者,我想要总结一下这一年的经验,并且和所有人分享,一个 30 多岁的人是如何进入科技行业的: 改变职业是一件吓人的事情,有时候还会成为一件危险的事情.年龄越大,危险就 ...
- AtCoder Beginner Contest 173 E Multiplication 4 分类讨论 贪心
LINK:Multiplication 4 害怕别人不知道我有多菜 那就上张图: 赛时 太慌了 (急着AK 题目不难却暴露我的本性 根本不思考无脑写 wa了还一直停不下来的debug 至少被我发现了1 ...
- luogu P5558 心上秋
LINK:心上秋 唐多令 宋 吴文英 何处合成愁.离人心上秋.纵芭蕉,不雨也飕飕.都道晚凉天气好,有明月,怕登楼. 年事梦中休.花空烟水流.燕辞归,客尚淹留.垂柳不萦裙带住.漫长是,系行舟. 心上秋 ...
- [转]Nginx限流配置
原文:https://www.cnblogs.com/biglittleant/p/8979915.html 作者:biglittleant 1. 限流算法 1.1 令牌桶算法 算法思想是: 令牌以固 ...
- Springboot中的CommandLineRunner
CommandLineRunner接口的作用 在平常开发中可能需要实现在启动后执行的功能,Springboot提供了一种简单的实现方案,即实现CommandLineRunner接口,实现功能的代码在接 ...