I'm a beginner at this and I'm struggling with changing style for buefy elements. In particular 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:
Both node-sass and sass-loader are installed.
Hope somebody can make me feel a bit more enlightened.
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";
).
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With