antd 学习1

简介: 1. 安装yarn add antd

1. 安装

yarn add antd

2.antd的按需引入+自定主题

2.1 安装依赖:

yarn add react-app-rewired customize-cra babel-plugin-import less@3.12.2 less-loader@7.1.0

(这里安装less和less-loader指定版本是因为现在安装的less和less-loader版本较高,配置完会报错)


2.2 修改package.json

scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test",
"eject": "react-scripts eject"
},

2.3 根目录下创建config-overrides.js

//配置具体的修改规则
const { override, fixBabelImports,addLessLoader} = require('customize-cra');
module.exports = override(
fixBabelImports('import', {
libraryName: 'antd',
libraryDirectory: 'es',
style: true,
}),
addLessLoader({
lessOptions:{
javascriptEnabled: true,
modifyVars: { '@primary-color': 'green' },
}
}),
);


2.4 备注:不用在组件里亲自引入样式了,即:import 'antd/dist/antd.css'应该删掉


相关文章
|
7月前
|
前端开发 JavaScript 测试技术
从零开始搭建react+typescript+antd+redux+less+vw自适应项目
从零开始搭建react+typescript+antd+redux+less+vw自适应项目
185 0
|
2月前
|
JavaScript
vue3- antd design vue 引入iconfont
vue3- antd design vue 引入iconfont
|
4月前
|
存储 JavaScript 前端开发
Vue中通过集成Quill富文本编辑器实现公告的发布。Vue项目中vue-quill-editor的安装与使用【实战开发应用】
文章展示了在Vue项目中通过集成Quill富文本编辑器实现公告功能的完整开发过程,包括前端的公告发布、修改、删除操作以及后端的数据存储和处理逻辑。
Vue中通过集成Quill富文本编辑器实现公告的发布。Vue项目中vue-quill-editor的安装与使用【实战开发应用】
|
6月前
|
资源调度 前端开发
|
缓存
Vue3案例-todoMVC-pinia版 (可跟做练手)
Vue3案例-todoMVC-pinia版 (可跟做练手)
48 0
|
7月前
|
前端开发 JavaScript 架构师
react+typescript+umi+dva+antd
react+typescript+umi+dva+antd
109 0
|
7月前
|
JavaScript 前端开发 大数据
⚡️[前端学习]从0到1做一个Vue风格的Todolist(Vue牛刀小试)⚡️
⚡️[前端学习]从0到1做一个Vue风格的Todolist(Vue牛刀小试)⚡️
44 0
|
前端开发 JavaScript
学习React Hooks和TypeScript打造的仿Antd的UI组件库
✨ RockUI 学习React Hooks和TypeScript实现仿Antd的react UI组件库,并通过此组件库在create-react-app的基础上实现了一套简单的应用,下方链接 样式解决方案——saas 测试——Jest框架 Icon库基于react-fontawesome github 文档 文档使用storybook进行展示 使用eslint和prettier对代码风格进行约束 使用见README.md,学习及开发中的问题与解决见STUDY_README.md
134 0
|
Web App开发 JavaScript 前端开发
初入了解——Vue.js
根据上篇文章来继续了解Vue
109 0
初入了解——Vue.js
|
前端开发 JavaScript API
前端知识库Reactjs基础系列四react-router
在开发spa项目中,前端路由是一个无法绕开的技术,在整个spa前端架构中我觉的掌握前端路由配置,状态管理以及异步请求的封装是最基本的能力。本文主要介绍react-router对于react项目的作用,以及基本配置。