Feature: support importing css on demand even if we use the CSS variable version.

[TrickyPi]

Reproduction link

https://github.com/TrickyPi/issue-repo

Steps to reproduce

1. git clone -b antd-variable https://github.com/TrickyPi/issue-repo && cd issue-repo
2. pnpm i
3. pnpm build
4. 看到最后的css产物，发现一些全局的style并没有使用css variable。

5. 修改node_modules/antd/es/style/default.less文件

@root-entry-name: default;
@import './index-pure.less';

6. pnpm build
7. 看到最后的css产物，发现一些全局的style使用了css variable。

What is expected?

支持动态导入组件的样式（支持使用babel-import-plugin），可以减少最后包的体积

What is actually happening?

官网的例子中，只有全局css文件引入，参考链接：https://ant.design/docs/react/customize-theme-variable#header

Environment	Info
antd	4.20.1
React	18.0.0
System	unrelated
Browser	unrelated

---

我在想，官网上没有提供按需引入的文档，是不是这个问题，如果是这个问题的话，
我觉得我们是否可以修改相关的gulp打包配置(.antd-tools.config.js)，在打包es或lib目录时，处理一下es/style/default.less文件。

出现第4个步骤的原因，是less-loader内配置的@root-entry-name影响不到es/style/default.less文件其后续导入的es/style/themes/index.less文件内的动态引入@import './@{root-entry-name}.less，这里的@root-entry-name的值其实一直都是es/style/index.less文件下@root-entry-name: default设置的值（default），

相关引用顺序
es/style/default.less -> es/style/index.less -> es/style/index-pure.less -> es/style/themes/index.less

[afc163]

Is it #34602 helpful?

[TrickyPi]

跟这个issue不太一样。

假如less-loader配的@root-entry-name是variable，理想的情况下，应该是不会引用es/style/themes/default.less, 但是目前在打包阶段是引用了这个文件，所以造成全局样式（比如：es/style/core/global.less）的less变量受到了该文件的影响，可以看es/button/style/index.js内引用的其中一份根less文件(import '../../style/default.less';)的依赖。

其他信息：
需要定制暗黑主题的时候，文档上写的方案是把所有dark的less变量配置在less-loader里（文档），不能直接配置@root-entry-name为dark，感觉跟css variable版本是相同的问题（第4个步骤的原因）。

[afc163]

css variable 版本不会再深入改造了，我们会迁移到 CSS in JS 方案上：#34087

[TrickyPi]

感谢回复！dark主题或compact主题，也会迁移到CSS in JS方案上吗？

[afc163]

会。