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

[zmhweb]

提问前先看看：

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 (

测试css样式加载问题

    );
}

}

export default App;

© 版本信息

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

🚑 其他信息

发现css多次渲染

[zmhweb]

antd-pro-less-test.zip 代码示例