小编Jon*_*__G的帖子

我是这方面的初学者，我正在努力改变 buefy 元素的风格。特别是buefy选项卡。

在我的组件中，我有这种风格：

<style lang="scss" scoped>

// Import Bulma's core
@import "~bulma/sass/utilities/_all";

// Set your own stuff
$my-primary: red;
$link: red;
$colors: (
  "primary": ($min-primary, $primary-invert)
);

$tabs-toggle-link-border-color: red;
$tabs-toggle-link-border-style: red;
$tabs-toggle-link-hover-background-color: red;
$tabs-toggle-link-hover-border-color: red;
$tabs-toggle-link-active-background-color: red;
$tabs-toggle-link-active-border-color:red;
$tabs-toggle-link-active-color: $link-invert !default;

// Import Bulma and Buefy styles
@import "~bulma";
@import "~buefy/src/scss/buefy";
</style>

我的标签格式如下：

<b-tabs type="is-toggle" size="is-medium" expanded>

链接颜色和原色按预期更改。但标签保持其原始颜色。

有两件事我觉得很奇怪：

1. 如果我将此样式移动到 App.vue 并删除“范围”-样式不起作用。但是 - 原色和链接颜色变为紫色（不像我预期的那样是绿宝石色，如果我只是从组件中删除 $colors 就会发生这种情况）。我认为添加到 App.vue 的所有样式都适用于所有组件？
2. 为什么标签不改变颜色？我弄错了变量吗？我如何找到正确的变量？此处使用的变量位于 bulma/sass/components/tabs.sass 中。

node-sass 和 sass-loader 都安装了。

希望有人能让我感觉更开明:-)