5-create-react-app整合antDesign功能
使用ant-design:
首先创建react项目:
create-react-app app
cd app
其次
AntDesign的高级配置:按需导入组件,自定义主题
1.下载依赖(利用yarn,或者npm都行)
yarn add react-router-dom //装路由插件
yarn add antd //装antd 插件 在 create-react-app 创建的工程中使用 antd 组件
yarn add react-app-rewired customize-cra //react-app-rewired (一个对 create-react-app 进行自定义配置的社区解决方案)
yarn add babel-plugin-import //babel-plugin-import 是一个用于按需加载组件代码和样式的 babel 插件
yarn add less less-loader //按照 配置主题 的要求,自定义主题需要用到 less 变量覆盖功能。
2.修改package.json
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test",
}
- 表示要删除的
+ 表示要添加的
3,在项目根目录创建config-overrides.js
在项目根目录创建一个 config-overrides.js 用于修改默认配置。(js配置文件需要修改)
module.exports = function override(config, env) {
// do stuff with the webpack config...
return config;};
const { override, fixBabelImports, addLessLoader } = require('customize-cra');
module.exports = override(
fixBabelImports('import', {
libraryName: 'antd',
libraryDirectory: 'es',
style: true,
}),
addLessLoader({
javascriptEnabled: true,
modifyVars: { '@primary-color': '#1DA57A' },
}),
);
最新文章
- 转:python中对list去重的多种方法
- 利用docker搭建rtmp服务器(1)
- linux网络基础--学习笔记
- 软件工程随堂小作业——(C++)
- MySQL 执行计划explain详解
- temp 临时文件
- EventBus分析
- spring mvc MultipartFile 上传文件错误解决
- uva 816 BFS求最短路的经典问题……
- IT类非开发面试总结--2
- Android源码解析——LruCache
- npm 是node.js下带的一个包管理工具
- day47-python爬虫学习二
- Kafka(1)--kafka基础知识
- java实现将包含多个<;REC>;的文件拆成若干只包含一个<;REC>;的文件
- Confluence 6 让 Jira 应用停止发送通知到 Confluence
- netty源码解解析(4.0)-7 线程模型-IO线程EventLoopGroup和NIO实现(二)
- emwin 之消息 WM_INIT_DIALOG
- AGC 027C.ABland Yard(拓扑/二分图)
- 尚硅谷springboot学习12-profile