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();
^

此问题主要是less的版本是3.0以上才会出现的。

解决方案1：

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

yarn add less@^2.7.3

或者

打开项目的package.json 找到dependencies下面的less 将其版本改为 "2.7.3" 然后 yarn install

解决方案2：

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

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

// 新增这2行
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,
  },
},

第二种方案我试了下，没有成功，最终选择第一种方案了。