Блог

Я пытаюсь реализовать переключение тем между тремя темами. Темная, Светлая и 3-я тема. Моя идея состоит в том, чтобы определить 3 переменные.меньше файлов, по одному для каждой темы. В файле я заново определяю цвета antd. Сброс.меньше будет импортировать переменную.меньше для сброса цветов, определенных в antd.меньше. Как в приведенном ниже коде:

 // 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";
}
 

Но приведенный выше код не работает. Я думаю, проблема в том, что вы не можете импортировать один и тот же antd.меньше файлов в меньшем количестве. Я попытался добавить (несколько) ключевых слов при импорте одного и того же файла, но для компиляции 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";
}
 

Если у меня есть только темная и светлая тема, я импортирую antd.меньше в main.js для легкой темы и импортируйте antd.меньше 2-го раза внутри .темнота для темной темы. Кажется, это работает.
Но когда я добавляю 3-ю тему, так как тот же antd.меньше импортируется снова, когда я переключаюсь на 3-ю тему, цвета не меняются.

Прямо сейчас решение, которое я вижу, состоит в том, чтобы сбросить цвета для каждого класса antd в 3-й теме. Но это действительно хлопотно, есть так много классов, которые я должен сбросить. Интересно, есть ли лучшее решение?