React实现antd按需加载并自定义主题

我这里使用的方法是npm run eject的方法暴露webpack的配置，自己修改配置。

配置less环境

antd是基于less写的，所以自定义主题的时候要使用less,所以React要支持less

• 打开config下面的 webpack.config.js，仿照sass的配置，添加下面的配置

  const lessRegex = /\.less$/;
  const lessModuleRegex = /\.module\.less$/;
  
  // ....
  {
                test: lessRegex,
                exclude: lessModuleRegex,
                use: getStyleLoaders(
                  {
                    importLoaders: 3,
                    sourceMap: isEnvProduction && shouldUseSourceMap,
                  },
                  'less-loader'
                ),
                sideEffects: true,
      },
      {
                test: lessModuleRegex,
                use: getStyleLoaders(
                  {
                    importLoaders: 3,
                    sourceMap: isEnvProduction && shouldUseSourceMap,
                    modules: {
                      getLocalIdent: getCSSModuleLocalIdent,
                    },
                  },
                  'less-loader'
                ),
       },
  
  

• 安装less, less-loader

  yarn add less less-loader or npm i less less-loader -S
  

• 测试

  将原来的.css文件改成.less,然后注意文件导入的后缀名，测试样式是否生效
  

实现按需加载

• 安装babel-plugin-import 修改webpack.config.js

      {
              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?-svgo,+titleProp,+ref![path]',
                        },
                      },
                    },
                  ],
                  // 开始添加代码
                  [
                    require.resolve('babel-plugin-import'),
                    {
                      libraryName: 'antd',
                      libraryDirectory: 'es',
                      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,
                // See #6846 for context on why cacheCompression is disabled
                cacheCompression: false,
                compact: isEnvProduction,
              },
            },
  

• 修改样式

      if (preProcessor) {
        loaders.push(
          {
            loader: require.resolve('resolve-url-loader'),
            options: {
              sourceMap: isEnvProduction && shouldUseSourceMap,
            },
          },
          {
            loader: require.resolve(preProcessor),
            options: {
              sourceMap: true,
            },
          }
        );
      }
      // 新添加的代码
      if (preProcessor && preProcessor === 'less-loader') {
        loaders.push(
          {
            loader: require.resolve('resolve-url-loader'),
            options: {
              sourceMap: isEnvProduction && shouldUseSourceMap
            }
          },
          {
            loader: require.resolve(preProcessor),
            options: {
              sourceMap: true,
              appendData: () => {
                return '@primary-color: #ff4757;'
              },
              lessOptions: {
                javascriptEnabled: true,
              }
            }
          }
        );
      }
  

这样就可以实现antd按需加载并且自定义主题了