在 vue.js 中使用 SASS 自定义 Buefy

Question

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

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

Answer 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";）。