antd在React项目中的使用

文档地址：https://ant.design/index-cn

antd的基本使用

安装antd

yarn add antd

基本使用

import React, { Component } from 'react' 
import { Button } from 'antd';
import 'antd/dist/antd.css'; // 引入样式

export default class Home extends Component {
    render() { 
        return (
            <div>
                <Button type="primary">Primary Button</Button> 
            </div>
        )
    }
}

antd样式的按需引入、自定义主题

https://3x.ant.design/docs/react/use-with-create-react-app-cn

安装依赖包

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

修改package.json

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

在根目录新建 config-overrides.js 文件

//配置具体的修改规则
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' }
    })
);

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

遇到的问题

解决办法

• less-loader 的版本过高，不兼容 getOptions 函数方法，所以需要对 less-loader 进行降级处理
• 通过 yarn remove less-loader 命令卸载原版本的 less-loader，然后 通过 yarn add less-loader@5.0.0安装，问题就解决了。