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

vuejs在单个文件vue组件中使用scoped css的多个主题

1 个答案: