5

我是这方面的初学者，我正在努力改变 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 都已安装。

希望有人能让我感觉更开明。

4

1 回答 1

1

编辑：事实证明，有一种方法可以让它与scoped样式一起使用。为此，您只需将@import语句包装到/deep/选择器中：

<style lang="scss" scoped>
... // everything else remains the same
/deep/ {
  // Import Bulma and Buefy styles
  @import "~bulma"; 
  @import "~buefy/src/scss/buefy";
}

原始答案

尽管这是一个有点老的问题，但我最近在dropdown组件方面遇到了同样的问题。

scoped原始代码中的变量是正确的，但由于样式原因它不起作用。由于@import在上下文中调用scoped，因此它也将被限定，因此 CSS 将不匹配 HTML。假设tab组件中的原始代码是这样的：

$tabs-border-bottom-color: $border !default
$tabs-border-bottom-style: solid !default
$tabs-border-bottom-width: 1px !default

.tabs
  @extend %block
  +overflow-touch
  @extend %unselectable
  align-items: stretch
  display: flex
  font-size: $size-normal
  justify-content: space-between
  overflow: hidden
  overflow-x: auto
  white-space: nowrap
  a
    align-items: center
    border-bottom-color: $tabs-border-bottom-color
    border-bottom-style: $tabs-border-bottom-style
    border-bottom-width: $tabs-border-bottom-width
....

编译后 Vue 加载器会添加[data-v-xxxxxxx]这样的内容：

.tabs[data-v-xxxxxx] {
// styles go here
}

但是html对于选项卡没有作用域，这就是它不起作用的原因。

使其工作的一种方法是删除scoped，但将所有样式包装到某个类名中，以保持组件的所有 css 私有。假设模板根元素有 class my-component-wrapper， scss 将如下：

<style lang="scss" scoped>
.my-component-wrapper {
  // 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>

值得注意的是，您不必导入每个组件bulma，buefy最好在主文件中导入主要/通用样式，然后只导入必要的组件 ( @import "~bulma/sass/components/tabs";)。

于 2020-06-21T15:36:44.263 回答