React ant.design 按需引入

需要下载的包

$ yarn add antd react-app-rewired customize-cra
$ yarn add babel-plugin-import --save-dev

修改package.json

/* 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 用于修改默认配置。

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

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

此时，全局引入的css不再需要 **@import ‘~antd/dist/antd.css’;**如果你引用过这个，请删除它