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

 1 "babel": {
 2   "presets": [
 3     "react-app"
 4   ],
 5   "plugins": [
 6     [
 7       "import",
 8       {
 9         "libraryName": "antd",
10         "style": "css"
11       }
12     ]
13   ]
14 }

webpack.config.js

 1 {
 2   test: /.(js|mjs|jsx|ts|tsx)$/,
 3   include: paths.appSrc,
 4   loader: require.resolve('babel-loader'),
 5   options: {
 6     customize: require.resolve(
 7       'babel-preset-react-app/webpack-overrides'
 8     ),
 9 
10     plugins: [
11       [
12         require.resolve('babel-plugin-named-asset-import'),
13         {
14           loaderMap: {
15             svg: {
16               ReactComponent: '@svgr/webpack?-svgo,+ref![path]',
17             },
18           },
19         },
20       ],
21       ['import', { libraryName: 'antd', style:"css" }],
22     ],
23     cacheDirectory: true,
24     cacheCompression: isEnvProduction,
25     compact: isEnvProduction,
26   },
27 },