Vue.js 使用：：v-deep和mixin设置组件的样式

我正在使用此处定义的mixin实现一个明/暗主题，但在尝试使用Vue deep选择器（：：v-deep）设置Buefy组件的样式时遇到了一些问题

我试图在中重现这种行为，但似乎：：v-deep指令根本不起作用。（）

米辛

$themes: (
  light: (primary: #931a25),
  dark: (primary: #ff9000),
);

@mixin themed() {
  @each $theme, $map in $themes {
    .theme-#{$theme} & {
      $theme-map: () !global;
      @each $key, $submap in $map {
        $value: map-get(map-get($themes, $theme), '#{$key}');
        $theme-map: map-merge($theme-map, ($key: $value)) !global;
      }
      @content;
      $theme-map: null !global;
    }
  }
}

@function t($key) {
  @return map-get($theme-map, $key);
}

这似乎是一条规则：

<style lang='scss' scoped>
::v-deep .tabs li.is-active a {
  color: red;

  @include themed() {
    color: blue;
  }
}
</style>

因此

a

元素的最终颜色将是

红色

我的问题是，如何更改主题mixin以生成css，如：

[data-v-4caae5aa] .tabs li.is-active a {
  color: red;
}
[data-v-4caae5aa] .theme-light .tabs li.is-active a {
    color: blue;
}
[data-v-4caae5aa] .theme-dark .tabs li.is-active a {
    color: blue;
}

[data-v-4caae5aa] .tabs li.is-active a {
  color: red;
}
[data-v-4caae5aa] .theme-light .tabs li.is-active a {
    color: blue;
}
[data-v-4caae5aa] .theme-dark .tabs li.is-active a {
    color: blue;
}