2

我正在尝试实现三个主题之间的主题切换。黑暗，光明和第三个主题。我的想法是定义 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 类重置颜色。但这真的很麻烦，我要重置的课程太多了。想知道是否有更好的解决方案？

4

0 回答 0