antd configuration file config-overrides.js

Download antd package 

npm install antd

Download dependencies (defined components packaged on request)

npm install react-app-rewired customize-cra babel-plugin-import

Custom less-loader, change the default style antd

npm install less less-loader

Define the load demand root packaged configuration module js: config-overrides.js

const {override,fixBabelImports,addLessLoader} =require('customize-cra');

module.exports = the override (
     // for packaging on demand antd: to package (using babel-plugin-import) The Import 
    fixBabelImports ( 'Import' , {
        libraryName:'antd',
        libraryDirectory:'es',
        style: to true , // automatic packaging associated style defaults style: 'CSS' 
    }),
     // use less-loader weight less variable source is reset, the set antd custom theme 
    addLessLoader ({
        javascriptEnabled: true,
        modifyVars:{'@primary-color':'#1DA57A'},
    })
);

Packge.json modify configuration files

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

 

Introducing antd required modules in app.js:

import React ,{Component} from 'react';
import { Button , message} from 'antd';

/* 
Root component applications
*/

export default class App extends Component{

    handleClick = ()=>{
        message.success ( 'success friends' )
    }
    render(){
        return (
            <Button type="primary" onClick={this.handleClick}>测试antd</Button>
            
    
            )
    }

}