antd按需加载,配置babel-plugin-import插件,编译后报错.bezierEasingMixin()解决方案

报错如下：

./node_modules/antd/lib/button/style/index.less (./node_modules/css-loader??ref--6-oneOf-7-1!./node_modules/postcss-loader/src??postcss!./node_modules/less-loader/dist/cjs.js!./node_modules/antd/lib/button/style/index.less)
// https://github.com/ant-design/ant-motion/issues/44
.bezierEasingMixin();
^

解决方案1： https://www.cnblogs.com/rebirth-csz/p/9263149.html

打开项目package.json ，将less版本降到3.0以下 比如安装 2.7.3版本。再 install 

解决方案2:  https://blog.csdn.net/weixin_40814356/article/details/84676903 （推荐）

使用新版的create-react-app创建项目后会发现，以前的webpack配置分为dev和prod两个文件，现在合为一个文件webpack.config.js了。

因为antd底层使用less，因此我们要单独配置less。首先我们要将单独抽离的loader函数做一下修改。

const lessRegex = /.less$/;
const lessModuleRegex = /.module.less$/;

// ...其他代码

// common function to get style loaders
  const getStyleLoaders = (cssOptions, preProcessor) => {
    const loaders = [
      isEnvDevelopment && require.resolve('style-loader'),
      isEnvProduction && {
        loader: MiniCssExtractPlugin.loader,
        options: Object.assign(
          {},
          shouldUseRelativeAssetPaths ? { publicPath: '../../' } : undefined
        ),
      },
      {
        loader: require.resolve('css-loader'),
        options: cssOptions,
      },
      {
        loader: require.resolve('postcss-loader'),
        options: {
          ident: 'postcss',
          plugins: () => [
            require('postcss-flexbugs-fixes'),
            require('postcss-preset-env')({
              autoprefixer: {
                flexbox: 'no-2009',
              },
              stage: 3,
            }),
          ],
          sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment,
        },
      },
    ].filter(Boolean);
    if (preProcessor) {
      loaders.push({
        loader: require.resolve(preProcessor),
        options: Object.assign(
          {},
          { sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment, },
          cssOptions
        )
      });
    }
    return loaders;
  };

然后修改less的loader配置，将以下代码添加到sass-loader的后面。

           {
              test: lessRegex,
              use: getStyleLoaders(
                {
                  importLoaders: 3,
                  sourceMap: isEnvProduction
                    ? shouldUseSourceMap
                    : isEnvDevelopment,
                  // modifyVars: {
                  //   'primary-color': "#f9c700"
                  // },
                  javascriptEnabled: true,
                },
                'less-loader'
              ),
              sideEffects: true,
            },
            {
              test: lessModuleRegex,
              use: getStyleLoaders(
                {
                  importLoaders: 3,
                  sourceMap: isEnvProduction
                    ? shouldUseSourceMap
                    : isEnvDevelopment,
                  modules: true,
                  getLocalIdent: getCSSModuleLocalIdent,
                },
                'less-loader'
              ),
            },        

然后babel-loader处添加按需加载的plugins配置。

          {
              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![path]',
                        },
                      },
                    },
                  ],
                  ["import", { "libraryName": "antd", "libraryDirectory": 'es', "style": true }]
                ],
                cacheDirectory: true,
                cacheCompression: isEnvProduction,
                compact: isEnvProduction,
              },
            },

重启项目，编译后大功告成！