react集成antdUI组件 按需加载 定制主题色

安装 antd UI组件 执行以下代码：

//安装 antd
yarn add antd
//安装UI组件css样式
yarn add babel-plugin-import

在wabpack.config.js中替换以下代码

//修改less模块，添加antd less-loader 解析
{
              test: /\.less$/,
              use: [{
                loader: 'style-loader',
              }, {
                loader: 'css-loader', // translates CSS into CommonJS
              }, {
                loader: 'less-loader', // compiles Less to CSS
                options: {
                  modifyVars: {//修改后的主题色
                    '@warning-color': '#fa3118',
                    '@primary-color': '#fa3118',
                  },
                  javascriptEnabled: true,
                },
              }],
// ...other rules
            },
//替换的目的是解析antd UI组件的css和less样式和按需加载antd 组件
{
              test: /\.(js|mjs|jsx|ts|tsx)$/,
              include: paths.appSrc,
              loader: require.resolve('babel-loader'),
              options: {
                customize: require.resolve(
                  'babel-preset-react-app/webpack-overrides'
                ),

                plugins: [
                  [
                    require.resolve('babel-plugin-named-asset-import'),
                    {
                      loaderMap: {
                        svg: {
                          ReactComponent:
                            '@svgr/webpack?-prettier,-svgo![path]',
                        },
                      },
                    },
                  ],
                    //这是新添加的
                  [require.resolve('babel-plugin-import'), { libraryName: 'antd', style: true }]
                ],
                // This is a feature of `babel-loader` for webpack (not Babel itself).
                // It enables caching results in ./node_modules/.cache/babel-loader/
                // directory for faster rebuilds.
                cacheDirectory: true,
                cacheCompression: isEnvProduction,
                compact: isEnvProduction,
              },
            },

需要注意的问题是：webpack.config.js中的js|mjs|jsx|ts|tsx模块中的[require.resolve(‘babel-plugin-import’), { libraryName: ‘antd’, style: true }] style 必须为true 才可以正确修改ant中的全局样式

Plugins:[
	[require.resolve('babel-plugin-import'), { libraryName: 'antd', style: true }]
]