antd遇见的坑

yarn add less

yarn add less-loader

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

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

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

{
  test: lessRegex,
  exclude: lessModuleRegex,
  use: getStyleLoaders(
    {
      importLoaders: 3,
      // sourceMap: isEnvProduction && shouldUseSourceMap,
      sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment,
    },
    'less-loader'
  ),
  sideEffects: true,
},
{
  test: lessModuleRegex,
  use: getStyleLoaders(
    {
      importLoaders: 3,
      // sourceMap: isEnvProduction && shouldUseSourceMap,
      sourceMap:isEnvProduction?shouldUseSourceMap:isEnvDevelopment,
      modules: true,
      getLocalIdent: getCSSModuleLocalIdent,
    },
    'less-loader'
  ),
},

保存配置，然后

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,
  },
},