Vue 下的主题切换使用 less 和 And-Design-Vue

如何解决Vue 下的主题切换使用 less 和 And-Design-Vue

我正在尝试在三个主题之间实现主题切换。黑暗，光明和第三个主题。 我的想法是定义 3 个 variable.less 文件，每个主题一个。在文件中，我重新定义了antd的颜色。 reset.less 将导入 variable.less 以重置 antd.less 中定义的颜色。 喜欢下面的代码：

// dark theme
.dark {
  @import '~ant-design-vue/dist/antd.less';
  @import "styles/asia-info/themes/dark-theme/reset.less";
  @import "styles/asia-info/themes/dark-theme/components.less";
  @import (css) "../common.css";
}

// Light theme
.light {
  @import "~ant-design-vue/dist/antd.less";
  @import "styles/asia-info/themes/light-theme/reset.less";
  @import "styles/asia-info/themes/light-theme/components.less";
  @import (css) "../common.css";
}

//3rd theme
.china-mobile {
  @import '~ant-design-vue/dist/antd.less';
  @import "styles/china-mobile/reset.less";
  @import "styles/china-mobile/components.less";
  @import (css) "../common.css";
}

但是上面的代码不起作用。我认为问题是你不能在 less 中导入相同的 antd.less 文件。我试图在导入同一个文件时添加（多个）关键字，但是 vue-cli 编译需要很长时间。所以现在我正在做的是：

// dark theme
.dark {
  @import '~ant-design-vue/dist/antd.less';
  @import "styles/asia-info/themes/dark-theme/reset.less";
  @import "styles/asia-info/themes/dark-theme/components.less";
  @import (css) "../common.css";
}

// light theme (import and.less and common.css in main.js in Vue)
@import "styles/asia-info/themes/light-theme/reset.less";
@import "styles/asia-info/themes/light-theme/components.less";

// 3rd theme
.china-mobile {
  @import '~ant-design-vue/dist/antd.less';
  @import "styles/china-mobile/reset.less";
  @import "styles/china-mobile/components.less";
  @import (css) "../common.css";
}

如果我只有深色和浅色主题，我会在 main.js 中为浅色主题导入 antd.less，并在 .dark 中第二次为深色主题导入 antd.less。它似乎工作。 但是当我添加第三个主题时，由于再次导入相同的antd.less，所以当我切换到第三个主题时，颜色没有改变。

现在，我能看到的解决方案是为第三个主题中的每个 antd 类重置颜色。但这真的很麻烦，有很多课我要重置。 想知道是否有更好的解决方案？