ant-design 引入样式及配置 babel-plugin-import 按需加载
ant-design 引入样式的几种方式
1 全局引用
js代码引入 ant-design 的 Button
组件
import React, { Component } from 'react';
import Button from 'antd/lib/button';
import './App.css';class App extends Component {render() {return (<div className="App"><Button type="primary">Button</Button></div>);}
}export default App;
修改 App.css
,文件头部引入 antd/dist/antd.css
@import '~antd/dist/antd.css';
引用的方式很容易,不过这实际上加载了全部的 antd 组件的样式文件,对前端性能是个隐患
2 单个组件分别引入对应的样式文件
比如想要引入 Button
组件和其对应的 css 样式
import { Button } from 'antd'
import 'antd/lib/button/style'
这样也算是“按需加载”,不过比较麻烦,每次写一个新组件,都要先载入 antd 组件,再载入对应 css 文件,代码冗余(而且写着也麻烦,你多引几个组件就要多写几行代码,程序员嘛都是要偷下懒的)
3 使用 babel-plugin-import 实现按需加载
使用 babel-plugin-import
import { Button } from 'antd'
地址会自动转换为 antd/lib/button
,配合 style
属性可以做到模块样式按需自动加载,编译之后的效果同上面第2种方法,不过减去了手动操作的麻烦
具体介绍可以看下官方手册,我这提一下基本用法
npm install babel-plugin-import -D
然后在 .babelrc
配置文件中,举个例子可以添加以下配置代码
:
{"plugins": [["import", { "libraryName": "antd","libraryDirectory": "lib", // libraryDirectory 默认为 lib"style": "css" ,}],],
}
总共有三种配置代码
,配置不当不仅样式会无法生效,而且会报未引入 loader 的 bug:
You may need an appropriate loader to handle this file type.
["import", { "libraryName": "antd" }]
:引入的是 js 模块["import", { "libraryName": "antd", "style": true }]
:引入的是 less 文件,需要在webpack.config.js
额外配置 less-loader 等,且不能在module.rules
中把node_modules/antd
给 exclude 了,如下操作{test: /\.less$/,exclude: /node_module/, // 会忽略node_module/antd,会报错,应删去use: ['style-loader', 'css-loader', 'less-loader'], },
["import", { "libraryName": "antd", "style": css }]
:引入的是 css 文件,需要在webpack.config.js
额外配置 css-loader 等,且不能在module.rules
中把node_modules/antd
给 exclude 了,如下操作{test: /\.css$/,exclude: /node_module/, // 会忽略node_module/antd,会报错,应删去use: ['style-loader', 'css-loader'], },
ant-design 引入样式及配置 babel-plugin-import 按需加载相关推荐
- Ant Design Table columns 参数配置隐藏列方法
Ant Design Table columns 参数配置隐藏列方法 const columns = [{title: '姓名',dataIndex: 'name',key: 'name',// 隐藏 ...
- 引入antd组件样式_create-react-app 实现 antd 的按需加载
按需加载 antd 的实现方式: 用 create-react-app 创建项目后,如果需要第三方的插件库,需要配置 webpack 配置文件,步骤如下: 首先运行 npm run eject 暴露出 ...
- ant design pro取消登录_JeecgBoot实战按需加载 Ant-Design-Vue和Icon
一.Ant-Design-Vue 按需加载 1.创建js文件 src/components/lazy_antd.js import Vue from 'vue'// base library impo ...
- React(九)create-react-app创建项目 + 按需加载Ant Design
(1)create-react-app如何创建项目我前面第一章介绍过了,这里就不过多写了, (2)我们主要来说说按需加载的问题 1. 引入antd npm install antd --save 2. ...
- antd mysql_create-react-app使用antd按需加载的样式无效问题的解决
官网给出的按需加载解决方案,先安装 babel-plugin-import 因为antd默认引入样式是less,所以需要手动配置为CSS,配置方法如下: 第一种方法:在package.json中配置, ...
- yii2-按需加载并管理CSS样式/JS脚本
(注:以下为Yii2.0高级:注意代码中php标签自己补上) 一.资源包定义 Yii2对于CSS/JS 管理,使用AssetBundle资源包类. 创建如下: backend/assets/AppAs ...
- create-react-app中配置antd按需加载、less、proxy、路径别名
配置antd.less.路径别名 第一步 // 安装一下需要的插 yarn add antd react-app-rewired customize-cra babel-plugin-import l ...
- echarts中x轴文件消失_百度Echarts图表在Vue项目的完整引入以及按需加载
导语 近日在项目中需要进行图表展示,百度的Echarts图表是非常合适的一个选择.项目是vue-cli搭建的,如何在项目中引入Echarts就是一个问题了.亲自动手实践了下,整理总结,希望对小伙伴提供 ...
- html引入babel-polyfill,【React】如何让babel-polyfill按需加载?
babel-polyfill可以让我们愉快的使用浏览器不兼容的es6.es7的API,但往往项目中只会用到这些API的一部分,一个babel-polyfill压缩后也有近100k的大小,这确实很恐怖. ...
最新文章
- 2021年大数据环境命令(一):常用命令汇总
- 正确理解Mysql的列索引和多列索引
- 掌握了这个方法,以后遇到bug不用再求人了!
- 用户体验的76个体验点
- 阻止事件冒泡两种方式:event.stopPropagation();和return false;
- 4月第三周国内域名解析商Top10:万网升至20.32%
- Fashion Your Firefox
- python await timeout_python等待10秒执行下一命令的方法
- 关于面向对象和面向过程等小例子(持续更新)
- 艾肯MICU声卡安装调试教程
- 破竹课堂-老A的杠杆术
- 吃透JAVA的Stream流操作,多年实践总结
- 少儿编程scrach(源码和课程)
- NR-PRACH:接入场景和接入流程
- linux寄存器位运算,位运算的一些操作
- 试题 算法训练 无聊的逗 - 蓝桥杯
- 疯狂动物消消乐html5游戏在线玩,疯狂动物园消消乐游戏
- 信息安全——替换密码加密(使用Cryptool、物联网)
- 收敛速度:线性收敛,超线性收敛,r 阶收敛
- 【论文笔记】Learning What Not to Segment: A New Perspective on Few-Shot Segmentation
热门文章
- 知识图谱-现代知识表示理论
- 记一次Android视频播放器开发
- win 10 使用本地代理自动配置pac
- php底部漂浮广告位代码,DIV+CSS固定底部的漂浮广告
- 计算机键盘打出来都是英语大写怎么办,电脑键盘切换大小写怎么变成CapsLock和Shift键...
- BAT批处理让文件夹里的文件单个或多个依次移动到另外一个文件夹
- RNN初探(vanilla RNN)
- Within-sample variability-invariant loss for robust speaker recognition under noisy environments
- MybatisPlus基本查询
- 电脑如何设置滑动关机——win10小彩蛋