在 V5 上用 less 覆蓋 antd 變量

Question

賞金將在 2 天后到期。 此問題的答案有資格獲得+100聲望賞金。 Ilyas Ghomrani想提請更多人關注這個問題。

我正在升級到 antd v5，我在使用 v4 保持變量覆蓋時遇到了一些問題

我在src/theme中有多個 less 文件，其中一個是以下文件

@import 'antd/lib/style/themes/variable.less';

/* font */
@font: ~'var(--font)';

/* auxiliary colors */
@secondary-color: ~'var(--secondary-color)';
@secondary-color-light: ~'var(--secondary-color-light)';
@primary-color-dark: @primary-7;
@primary-color-light: @primary-5;
@background-color: #f8f8f8;
@shadow-color: rgba(0, 0, 0, 0.09);
@text-color: #656565;
@secondary-text-color: #9d9d9d;
@light-text-color: #bababa;

@secondary-color-bg: @green-1;
@warning-color-bg: @orange-1;
@error-color-bg: @red-1;
@info-color-bg: @blue-1;

/* sizes */
@design-scale: 60 / 70;
@app-bar-height: 60px;

@page-padding: 40px 4vw;
@page-padding-mobile: 30px 15px;

@border-radius-base: 4px;
@border-width-base: 2px;

還嘗試從ConfigProvider primaryColor ConfigProvider.config({ theme: {primaryColor: '#fa259e'} });

在vite.config我添加了以下內容

...
import { theme } from 'antd/lib';
...

const { defaultAlgorithm, defaultSeed } = theme;

const mapToken = defaultAlgorithm(defaultSeed);
const v4Token = convertLegacyToken(mapToken);

export default () => {
    return defineConfig({
       ...
       css: {
            preprocessorOptions: {
                less: {
                    javascriptEnabled: true,
                    modifyVars: v4Token,
                },
            },
        },
       ...

我的樣式在間距填充方面存在多個問題......而且原色不適用

Answer 1

好吧，我認為你的問題是 antd v5 不再支持 LESS

看這里https://ant.design/docs/react/migration-v5

不幸的是，我沒有適合您的簡單解決方案，除了只要您需要 LESS 支持就堅持使用 v4 之外。