antD按需加载配置报错问题解决

antD按需加载配置报错问题解决

最近学习搭建react项目,在做antD按需加载时报错

yarn add less

yarn add less-loader

通过命令yarn eject，暴露出webpack文件

解决办法:
在config->webpack.config.js中添加，对照sass变量的定义，写less

1 const lessRegex=/\.less$/
 2 const lessModuleRegex=/\.module\.less$/
 3 
 4 {
 5   test: lessRegex,
 6   exclude: lessModuleRegex,
 7   use: getStyleLoaders(
 8     {
 9       importLoaders: 3,
10       // sourceMap: isEnvProduction && shouldUseSourceMap,
11       sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment,
12     },
13     'less-loader'
14   ),
15   sideEffects: true,
16 },
17 {
18   test: lessModuleRegex,
19   use: getStyleLoaders(
20     {
21       importLoaders: 3,
22       // sourceMap: isEnvProduction && shouldUseSourceMap,   
23       sourceMap:isEnvProduction?shouldUseSourceMap:isEnvDevelopment,  
24       modules: true,
25       getLocalIdent: getCSSModuleLocalIdent,
26     },
27     'less-loader'
28   ),
29 },

保存配置，然后

yarn add babel-plugin-import

package.json

"babel": {
  "presets": [
    "react-app"
  ],
  "plugins": [
    [
      "import",
      {
        "libraryName": "antd",
        "style": "css"
      }
    ]
  ]
}

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

转自:https://www.cnblogs.com/ronle/p/10651821.html 感谢原作者