react 按需引入 antd

npm install antd --save

引入 react-app-rewired和customize-cra 并修改 package.json 里的启动配置
npm install react-app-rewired customize-cra --save-dev

将package.json 的 "scripts" 修改为
"scripts": {

    "start": "react-app-rewired start",

    "build": "react-app-rewired build",

    "test": "react-app-rewired test",

    "eject": "react-scripts eject"

  },

安装 babel-plugin-import
npm install babel-plugin-import --save-dev

在根目录下创建覆盖webpack的 config-overrides.js 文件 并写入以下代码
 

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

module.exports = override(

    fixBabelImports('import', {

        libraryName: 'antd',

        libraryDirectory: 'es',

        style: 'css',

    })

然后在页面中写入，重启项目即可看到一个蓝色的按钮

 

若你还需要自定义样式，你需要安装 less
npm i less less-loader -D  (less-loader建议使用 7.3.0 版本)
然后修改 config-overrides.js 文件

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

module.exports = override(

    fixBabelImports('import', {

        libraryName: 'antd',

        libraryDirectory: 'es',

        style: true,

    }),

    addLessLoader({

        lessOptions: {

            javascriptEnabled: true,

            modifyVars: { '@primary-color': '#1DA57A' },

        }

    }),

);

重启项目，如果你看到一个绿色的按钮，说明你自定义主题成功了

附上包版本信息

最后，对自己的备忘录：

antd mobile 的配置与网页端只有 libraryName: 'antd-mobile',不一样。antd-mobile5.0以上不需要做按需加载。其依据webpack的Tree Shaking自配按需加载

如果需要安装less 不需要antd,可尝试仅安装
npm install react-app-rewired customize-cra --save-dev

 修改package.json的启动配置后修改 config-overrides.js 文件为
 

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

module.exports = override(

    addLessLoader({

        lessOptions: {

            javascriptEnabled: true,

        }

    }),

);