Customizing Buefy with SASS in vue.js

Question

I'm a beginner at this and I'm struggeling with changing style for buefy elements. In perticular the buefy tabs.

In my component, I've got this style:

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

And my tab is formatted like this:

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

The link color and the primary color are changed like expected. But the tabs remain in their original color.

There are two things I find strange:

If I move this styling to App.vue and remove the "scoped" - the styling does not work. However - the primary color and the link color changes to purple (not turquise like I'd expected and wich it does if I just remove the $colors from within the component). I thought all styling added to App.vue would work in all components?
Why does not the tabs change color? Have I got the wrong variables? How do I find the right variables? The variables used here is found in bulma/sass/components/tabs.sass.

Both node-sass and sass-loader are installed.

Hope somebody can make me feel a bit more enlightened :-)

rkm rkm · Accepted Answer · 2020-06-21T15:36:44

Edit: it turns out, there is a way how to get it working with scoped styles. For that all you need is to wrap @import statements into /deep/ selector:

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

Original answer

Even though this it's a bit old question, I faced the same problem recently with dropdown component.

Variables in original code are correct, but it does not work due to scoped styles. Since @import is called in scoped context, it will be also scoped and thus CSS will not match HTML. Assuming that original code in tab component is something like this:

$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
....

After compiling Vue loader will add [data-v-xxxxxxx] so it will look:

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

but html for tabs is not scoped and this is the reason why it does not work.

One way to get it working would be to remove scoped, but wrap all your styles into some class name to keep all css private for the component. Assuming that template root element has class my-component-wrapper, scss will be following:

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

Worth noting that you do not have to import bulma and buefy for each component, it's better to import main/general styles in main file and then import only necessary components (@import "~bulma/sass/components/tabs";).

Customizing Buefy with SASS in vue.js

1 Answers