Customizing Buefy with SASS in vue.js

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 stylesinto 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";).