🐛[BUG] webpack配置less后发现css重复渲染了9次

提问前先看看：

https://github.com/ryanhanwu/How-To-Ask-Questions-The-Smart-Way/blob/main/README-zh_CN.md

### 🐛 bug 描述

config-overrides.js 配置less后发现css重复渲染了9次

### 📷 复现步骤

config-overrides.js 配置如下

// 覆盖react内置webpack配置的文件
const path = require('path');
const filePath = path.resolve(__dirname, 'src/assets/css/variable.less');
const {
override,
addWebpackAlias,
addLessLoader,
fixBabelImports,
addDecoratorsLegacy
// setWebpackOptimizationSplitChunks
} = require('customize-cra');
const isProductionENV = process.env.NODE_ENV === 'production';

// 配置生产环境打包不生成.map文件
if (isProductionENV) {
process.env.GENERATE_SOURCEMAP = false;
}

module.exports = {
webpack: override(
// 配置路径别名
addWebpackAlias({
src: path.resolve(__dirname, 'src'),
style: path.resolve(__dirname, 'src/assets/css')
}),
addDecoratorsLegacy(),
fixBabelImports('import', {
libraryName: 'antd',
libraryDirectory: 'es',
// 支持 less sass stylus
style: true,
}),
addLessLoader({
lessOptions: {
// modifyVars: {
// hack: `true; @import "${filePath}";`
// },
javascriptEnabled: true
}
})
)
};

APP.js 引入任意组件

### 🏞 期望结果

正常渲染一次公共css

### 💻 复现代码

config-overrides.js 配置如下

// 覆盖react内置webpack配置的文件
const path = require('path');
const filePath = path.resolve(__dirname, 'src/assets/css/variable.less');
const {
override,
addWebpackAlias,
addLessLoader,
fixBabelImports,
addDecoratorsLegacy
// setWebpackOptimizationSplitChunks
} = require('customize-cra');
const isProductionENV = process.env.NODE_ENV === 'production';

// 配置生产环境打包不生成.map文件
if (isProductionENV) {
process.env.GENERATE_SOURCEMAP = false;
}

module.exports = {
webpack: override(
// 配置路径别名
addWebpackAlias({
src: path.resolve(__dirname, 'src'),
style: path.resolve(__dirname, 'src/assets/css')
}),
addDecoratorsLegacy(),
fixBabelImports('import', {
libraryName: 'antd',
libraryDirectory: 'es',
// 支持 less sass stylus
style: true,
}),
addLessLoader({
lessOptions: {
// modifyVars: {
// hack: `true; @import "${filePath}";`
// },
javascriptEnabled: true
}
})
)
};

app.js

import React, { Component } from 'react';

import {
ProForm
} from '@ant-design/pro-components';

class App extends Component {
render() {
return (

);
}
}

export default App;

### © 版本信息

- ProComponents 版本: [e.g. 4.0.0]
- umi 版本
- 浏览器环境
- 开发环境 [e.g. mac OS]

### 🚑 其他信息
发现css多次渲染


Start with the reported config-overrides.js webpack setup and the app.js import of ProForm, then reproduce the CSS loading behavior. Compare the stylesheet render count with and without the Less configuration and determine whether the result is one shared CSS render, as expected. The issue does not provide complete version, browser, or environment details.

Written by the indexing model from the issue text.