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

柔情只为你懂 2021-07-24 22:30 491阅读 0赞

默认已经是按需加载
    	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>
    
    		)
    	}
    }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70]: /images/20210724/ea25e0954d7a4e9195b40f0335b6598b.png