官方文档参考
Antd中使用高级配置，按需引入css样式
步骤：
Ⅰ、$ yarn add react-app-rewired customize-cra / $ 1、cnpm install react-app-rewired --save 2、$ cnpm install customize-cra --save
引入 react-app-rewired 并修改 package.json 里的启动配置。由于新的 react-app-rewired@2.x 版本的关系，你还需要安装 customize-cra。
$ yarn add react-app-rewired customize-cra /* package.json */ "scripts": { - "start": "react-scripts start", + "start": "react-app-rewired start", - "build": "react-scripts build", + "build": "react-app-rewired build", - "test": "react-scripts test", + "test": "react-app-rewired test", }Ⅱ、然后在项目根目录创建一个 config-overrides.js 用于修改默认配置。
module.exports = function override(config, env) { // do stuff with the webpack config... return config; };注意：antd 默认支持基于 ES module 的 tree shaking，js 代码部分不使用这个插件也会有按需加载的效果。
babel-plugin-import 是一个用于按需加载组件代码和样式的 babel 插件（原理），现在我们尝试安装它并修改 config-overrides.js 文件。
$ yarn add babel-plugin-import / cnpm install babel-plugin-import --save + const { override, fixBabelImports } = require('customize-cra'); - module.exports = function override(config, env) { - // do stuff with the webpack config... - return config; - }; + module.exports = override( + fixBabelImports('import', { + libraryName: 'antd', + libraryDirectory: 'es', + style: 'css', + }), + );Ⅳ、然后移除前面在 src/App.css 里全量添加的 @import '~antd/dist/antd.css'; 样式代码，并且按下面的格式引入模块。
// src/App.js import React, { Component } from 'react'; - import Button from 'antd/es/button'; + import { Button } from 'antd'; import './App.css'; class App extends Component { render() { return ( <div className="App"> <Button type="primary">Button</Button> </div> ); } } export default App;Ⅴ、最后重启 yarn start 访问页面，antd 组件的 js 和 css 代码都会按需加载
====================================================================================
至此 A系列入门学习完结