vuejs 在单个文件 vue 组件中具有范围 css 的多个主题

Question

假设我们有一个变量 scss 文件，如下所示

$darken-percentage: 15%;

$primary-color: #2aaae1;
$dim-primary-color: darken($primary-color, $darken-percentage);

$complementary-color: #faaf48;
$dim-complementary-color: darken($complementary-color, $darken-percentage);

$background-color: #1d1f29;

$middleground-color: #313444;
$dim-middleground-color: darken($middleground-color, $darken-percentage);
$light-middleground-color: lighten($middleground-color, $darken-percentage);

在 main.js 中我们可以使用@import 'variables.scss' 如果我有两个主题并且我想更改用户操作我可以有 2 个变量文件并根据用户操作有条件地导入，但是单文件 vue 组件呢 喜欢

<style scoped lang="scss">
  @import '../../theme/_variables.scss';
  .bm-upload{
    background: $primary-color;
  }
</style>

然后导入将不起作用所以无论如何我有全局变量文件并在其他文件中使用它而不重新导入它

Answer 1

最简单的方法是导入两个样式文件并更改父元素的类。当类发生变化时，浏览器会立即应用样式。

例如，您可以使用 classList 更改正文的类，并让所有样式都依赖于此。

created(){
    let body = document.getElementsByTagName('body')[0];
    body.classList.add("theme1");
},
methods: {
    changeTheme(){
        let body = document.getElementsByTagName('body')[0];
        body.classList.remove("theme1");
        body.classList.add("theme2");
    }
}

样式应该继承自主题类名，像这样：

.theme1 {
    .exampleClass {
       padding: 0;
    }
}