ant-design / ant-design/pro-components

🧐[问题]从umi换成vite构建后,ConfigProvider 提供的主题在 ProComponents失效

Open
#8,743 1 comment 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
4.8k
Forks
1.4k
Avg merge
10h 44m
Merged PRs (30d)
3

Description

提问前先看看:

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

### 🧐 问题描述
换成vite构建后,发现项目中ProComponents的样式都有问题了,检查发现是组件的cssVar没有生效,antd的组件都是正常的。找不到办法解决,求大佬指点,拜托了!!

### 💻 vite配置如下
import svgr from '@svgr/rollup';
import react from '@vitejs/plugin-react-swc';
import { GitRevisionPlugin } from 'git-revision-webpack-plugin';
import { resolve } from 'path';
import { defineConfig } from 'vite';
import loadCssModulePlugin from 'vite-plugin-load-css-module';
import proxy from './config/proxy';

const {
REACT_APP_ENV,
UMI_ENV,
CI_COMMIT_TAG,
CI_COMMIT_SHA,
CI_COMMIT_REF_NAME,
CI_COMMIT_TIMESTAMP,
} = process.env;

const gitRevisionPlugin = new GitRevisionPlugin();

function pathResolve(dir: string) {
return resolve(process.cwd(), '.', dir);
}

export default defineConfig({
base: '/',
plugins: [
react(),
svgr(),
loadCssModulePlugin({
include: (id) => {
return id.endsWith('.less') && !id.includes('node_modules') && id !== './global.less';
},
}),
],
css: {
preprocessorOptions: {
less: {
javascriptEnabled: true,
additionalData: `@import "${pathResolve('src/global.less')}";`,
},
},
},
define: {
UMI_ENV: JSON.stringify(UMI_ENV),
REACT_APP_ENV: JSON.stringify(REACT_APP_ENV),
'process.env': {
git: JSON.stringify({
version: CI_COMMIT_TAG ?? gitRevisionPlugin.version(),
commitHash: CI_COMMIT_SHA ?? gitRevisionPlugin.commithash(),
branch: CI_COMMIT_REF_NAME ?? gitRevisionPlugin.branch(),
lastCommitDateTime: CI_COMMIT_TIMESTAMP ?? gitRevisionPlugin.lastcommitdatetime(),
buildAt: new Date(),
}),
},
},
resolve: {
alias: [
{ find: '@', replacement: pathResolve('src') },
{ find: 'moment', replacement: 'dayjs' },
{ find: '~@', replacement: pathResolve('src') },
{ find: '@umijs/max', replacement: pathResolve('src/plugins') },
// 兼容 @nekit/request @nekit/auth 中的引用
{ find: 'umi', replacement: pathResolve('src/plugins') },
],
},
server: {
host: true,
open: true,
port: 8000,
hmr: true,
proxy: proxy[REACT_APP_ENV || 'dev'],
},
});

### 🚑如图
圈起来的部分都是procomponents

![image](https://github.com/user-attachments/assets/d7623280-cc8a-4aa6-8eb1-a235512b5c1a)

Contributor guide

Open the contributing guide

Research direction

Start by reproducing the reported styling failure with the provided Vite configuration, especially its CSS and Less settings, and inspect how ConfigProvider supplies cssVar values to ProComponents. Done means ProComponents theme variables and styles work after the migration while Ant Design components remain correct.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript, vite
Domain
frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.