react 脚手架环境ui库antd搭建、配置less

最新推荐文章于 2024-08-20 15:53:53 发布

神奇大叔

最新推荐文章于 2024-08-20 15:53:53 发布

阅读量457

点赞数 1

分类专栏： React 文章标签： react

本文链接：https://blog.csdn.net/weixin_43294560/article/details/104304238

版权

React 专栏收录该内容

44 篇文章 4 订阅

订阅专栏

本文介绍如何在 React 脚手架环境中使用 Ant Design UI 库实现按需加载，优化项目资源加载效率。同时，详细说明了如何配置 Less 以自定义主题颜色，包括安装依赖、修改配置文件、引入样式等步骤。

摘要由CSDN通过智能技术生成

默认已经是按需加载
	cnpm install -S antd
	import {Button} from 'antd'
	import 'antd/dist/antd.css'
	
针对react脚手架环境设计的ui库
	1、安装
		cnpm install -S antd

	2、修改成按需加载
		(1)安装依赖
			yarn add react-app-rewired customize-cra -D

		(2)修改package.json中的scripts

			将原本对应内容替换成如下内容
				"start": "react-app-rewired start",
				"build": "react-app-rewired build",
				"test": "react-app-rewired test",

		(3)然后在项目根目录创建一个config-overrides.js 用于修改默认配置。

			const { override, fixBabelImports } = require('customize-cra');
				module.exports = override(
				fixBabelImports('import', {
				libraryName: 'antd',
				libraryDirectory: 'es',
				style: 'css',
				}),
			);

		(4)安装依赖
			yarn add -D install babel-plugin-import
		
		(5)引入所需要的样式
			import { Button } from 'antd';
		
		(6)使用
			<Button type="primary">Button</Button>
	
	3、配置less
		1、安装
			cnpm install -D less less-loader@5.0.0
			
		2、修改config-overrides.js 
		
			const { override, fixBabelImports,addLessLoader } = require('customize-cra');
			
			module.exports = override(
			    
			    fixBabelImports('import', {
			        libraryName: 'antd',
			        libraryDirectory: 'es',
			        style: true,
			    }),
			    addLessLoader({
			        javascriptEnabled: true,
			    })
			);
			
	4、定制主题颜色
		在 addLessLoader中的 javascriptEnabled: true后添加
		 modifyVars: { '@primary-color': '#1DA57A' },
		
		若通过外部文件xx引入
			(1)module.exports={
				'@primary-color': '#1890ff',
				'@link-color': '#1890ff',...
			}
			
			(2)在config-overrides.js 中
				const xx=require('./xx')
		 		modifyVars:xx
		 		
		 	其他主题颜色:
		 	@primary-color: #1890ff; // 全局主色
			@link-color: #1890ff; // 链接色
			@success-color: #52c41a; // 成功色
			@warning-color: #faad14; // 警告色
			@error-color: #f5222d; // 错误色
			@font-size-base: 14px; // 主字号
			@heading-color: rgba(0, 0, 0, 0.85); // 标题色
			@text-color: rgba(0, 0, 0, 0.65); // 主文本色
			@text-color-secondary: rgba(0, 0, 0, 0.45); // 次文本色
			@disabled-color: rgba(0, 0, 0, 0.25); // 失效色
			@border-radius-base: 4px; // 组件/浮层圆角
			@border-color-base: #d9d9d9; // 边框色
			@box-shadow-base: 0 2px 8px rgba(0, 0, 0, 0.15); // 浮层阴影

		
		

其他样式看官方文档

代码示例：

import React,{Component} from 'react'
import {Route,BrowserRouter,Link} from 'react-router-dom'
import { Button } from 'antd';
import './App.css';

export default class App extends Component{
	render()
	{
		
		return(
			<div className="App">
				<Button type="primary">Button</Button>
				 <Button>Default</Button>
				    <Button type="dashed">Dashed</Button>
				    <Button type="danger">Danger</Button>
				    <Button type="link">Link</Button>
			</div>

		)
	}
}