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的大小,这确实很恐怖. ...
最新文章
- O2O产品经理,请多关注屏幕之外
- 知道坐标matlab三维作图,已知点坐标,要求根据坐标作出三维曲面图
- redis——旧版复制
- Android笔记 - Android studio如何添加arr库
- CUDA中的复数定义、开内存空间以及运算
- 中国水性植绒胶行业市场供需与战略研究报告
- ssh整合步骤之二(架构设计)
- Linux—磁盘和文件系统管理(二)
- JNuit4实战技巧总结
- RQNOJ 34 紧急援救 解题报告
- 基于python提火车票信息_python3.X 抓取火车票信息【修正版】
- 微信 米聊 导游 服务器 李白,【文化】千古“第一导游”,我只服李白!
- 虚幻4渲染编程(光线追踪篇)【第一卷:光线追踪篇开篇综述】
- idea中push代码失败问题解决
- Debian11安装mysql5.7
- 日本語のまとめ(入门班)
- 2.1.3 毫米波雷达
- 计算机专业要不要考普通话证书,大一新生:这3个证书一定要考!不考后悔,越拖越难考?...
- 古墓里出土的那些奇怪文物,能否证明穿越的存在?
- Windows .CAB格式离线更新包的安装方法
热门文章
- echarts:中国地图实现
- warning C4005]ws2def.h(91): warning C4005: “AF_IPX”: 宏重定义 winsock.h(460) : 参见“AF_IPX”的前一个定义
- 办公室服务器文件管理制度,办公室文件管理制度
- 设计模式--工厂设计
- 【详细说明】二代身份证号码的组成结构(含校验码算法与行政区划代码)
- SQL数据库系统概论
- COS函数和ACOS函数的使用
- KV260 AI入门开发套件简介
- php 如何实现关键字查找,PHP如何实现多个关键词查询?
- 物流货运移动APP解决方案