create-react-app 脚手架 中按需引入Antd 样式

参考Antd 3.26.19

1、导入Antd

yarn add antd

注：yarn   可以通过 npm install -g yarn 安装， 可以通过 yarn --version 查看yarn 版本

2、导入react-app-rewired customize-cra

yarn add react-app-rewired customize-cra

3、配置修改package.json

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

4、在根目录下创建config-overrides.js （与package.json同级）

5、安装 babel-plugin-import

babel-plugin-import是一个用于按需导入组件的 babel 插件（它是如何工作的？）。我们现在正在尝试安装和修改config-overrides.js.

yarn add babel-plugin-import

6、在config-overrides.js 配置

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

module.exports = override(
  fixBabelImports("import", {
    libraryName: "antd",
    libraryDirectory: "es",
    style: "css",
  })
);

7、现在可以删除组件中 import '~antd/dist/antd.css' 的语句;

8、重启项目即可

yarn start