Custom Theme with modified @ant-prefix value still compiles css with default 'ant' prefix

[ncomeaux]

• I have searched the issues of this repository and believe that this is not a duplicate.

Version

1.7.7

Environment

Vue ^2.6.12 with Nuxt ^2.13.3, ant-design-vue 1.7.8, Less ^4.0.0 & Less Loader ^10.0.0 (but building with lessc v3.13.1)

Reproduction link

https://github.com/ncomeaux/ant-design-vue-less-compile-issue

Steps to reproduce

• Create custom less file to modify theme (outlined here - https://www.antdv.com/docs/vue/customize-theme/#Customize-in-less-file)
• Customize @ant-prefix value with any custom string
• Compile less to css (I used lessc light-theme.less light-theme.css --source-map --js) with lessc v3.13.1

What is expected?

Compiled CSS is all prefixed with custom string rather than 'ant', that can then be used with the ConfigProvider's prefixCls to switch between themes on the fly.

What is actually happening?

Compiled CSS still has default prefix 'ant', and using a custom prefixCls via ConfigProvider breaks layout and other styling values in app.

---

I was initially trying to import my custom dark-theme.less and light-theme.less files directly but that also didn't work, I assume for the same reasons. Compiling the CSS was simply to create a more visually reproducable issue.

[github-actions]

Hello @ncomeaux. Please provide a online reproduction by forking this link for vue2、 link for vue3 or a minimal GitHub repository. Make sure to choose the correct version.

你好 @ncomeaux, 我们需要你提供一个在线的重现实例以便于我们帮你排查问题。你可以通过点击 此处 for vue2、 此处 for vue3 创建一个 codesandbox 或者提供一个最小化的 GitHub 仓库。请确保选择准确的版本。

[ncomeaux]

The minimal github repository is here - https://github.com/ncomeaux/ant-design-vue-less-compile-issue

There is no actual vue implementation of the app since the issue revolves around compiling Less with a custom prefix. I attempted to put together a codeSandbox example here - https://codesandbox.io/s/vue-antd-prefixcls-with-custom-less-9logz. That said support is lacking for compiling Less in their environment.

Inside the github repository or codesandbox you will see a Less file (demo.less or light-theme.less) with a customized @ant-prefix value set to either "custom" or "ant-light" depending on which place you are looking.

Expected Behavior
The compiled CSS file will have replaced all implementations of the 'ant-' prefix with 'custom-' or 'ant-light-' prefixes.
Actual Behavior
The compiled CSS file appends "@ant-prefix = ant-light" (or "@ant-prefix = custom") and leaves the ant-prefix on all classes.

I am attempting to follow the instructions from this part of the documentation - https://www.antdv.com/docs/vue/customize-theme/#Customize-in-less-file

I am referencing the default variables from this part of the documentation - https://www.antdv.com/docs/vue/customize-theme/#Ant-Design-Vue-Less-variables

[ncomeaux]

Update - I was able to resolve the issue. I was trying to modify variables in the same file as I was importing antd.less, moving the variables to a separate file and compiling works. There are still some issues with the custom classes but I can open a separate issue for that.

[github-actions]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.