5

I can override sass variables for all project. I do it in the file src/sass/variables.scss. Before this I created sass folder and this file. As I said, it works, I can override variables in this file, for whole project. But I need to override necessary variable only for component. I try do it like this:

<style lang="sass">
  $btn-text-transform: lowercase         //by default uppercase
</style>

Also I try to add @import '~vuetify/src/components/VBtn/_variables.scss' before or after the variable. But it does not work. What am I doing wrong? How can i do it?

spinkus
  • 7,694
  • 4
  • 38
  • 62
Ivan
  • 89
  • 1
  • 6
  • From your description, it seems you import vuetify's variables, modify them and them apply them on vuetify's theme to modify it project-wide. This results in a global stylesheet that gets applied to all your components. Now on top of that, you want to change those styles for one of your components by changing the sass variable, but that doesn't work. Is that correct? – Dan Macak Aug 13 '21 at 14:54
  • When I try to change sass variable in global for all project, it works. But I do it only for experiment, really I need to change variable only in component, not for whole project. I try do it like this in component``, but it does not work. – Ivan Aug 15 '21 at 19:45
  • I updated my answer, let me know if you have more questions. – Dan Macak Aug 18 '21 at 16:44

2 Answers2

5

First of all it's probably not a good idea to import those global styles per component. Every time you @import the vuetify's stylesheets get added to your generated code. Actually, using @import is generally discouraged, check Heads up from Sass to see why.

But going with your code snippet, your override of $btn-text-transform can't work because you are using !default in your assignment. It won't assign the value since the value got assigned in the imported stylesheet already.

So get rid of the !default. If that alone doesn't work, move the $btn-text-transform declaration up above the @import.

Edit 18-08-21 How to override SASS variable vuetify in component:

You can override the Sass variables only there where you import the stylesheet using those. If you eg. import (directly or transitively) ~vuetify/src/components/VBtn/_variables.scss into your global stylesheet and then in your component (a separate stylesheet) you want to change $btn-text-transform, it won't work.

That's because of how Sass variables work - they exist only in compilation time. That, and the fact that the compilation scope of your component's styles is separate from the global stylesheet (if we go with the example above) means that changing, well actually declaring a new $btn-text-transform in your component's styles has no effect on the global stylesheet's compilation. That compilation might have already finished before your component's styles even begin to compile.

Your approach would work if you imported VBtn styles into your component like this:

@import "~vuetify/src/components/VBtn/_variables.scss";

$btn-text-transform: [your-own-value];

@import "~vuetify/src/components/VBtn/VBtn.sass";

And ideally you wouldn't import VBtn styles anywhere else. If you did, eg. in some global stylesheet, there would be style duplication which would mean less predictability to which styles get applied and more bytes that'd need to be sent to the client.

But that might be too much hustle. The easiest way to customize the styles locally is to import all the vuetify's styles you need globally and then in your component apply your own, scoped style changes. Talking about the text-transform you want to change, you can just use this in your component's styles:

<style scoped>
/deep/ .v-btn {
  text-transform: [your-own-value];
}
</style>
Dan Macak
  • 16,109
  • 3
  • 26
  • 43
1

In relation of @Skocdopole´s answer try ::deep or >>> instead of /deep/

Sass

<style lang="scss" scoped>
::deep .v-btn {
  text-transform: [your-own-value];
}
</style>

Css

<style scoped>
>>> .v-btn {
  text-transform: [your-own-value];
}
</style>

Also see How do I use /deep/ or >>> or ::v-deep in Vue.js?

Sascha
  • 183
  • 2
  • 10