How to modify SASS variables of a vuetify component?

[GitTheCodeAndHitTheRoad]

Hello,

I am trying to change some SASS variables for the v-date-picker from vuetify but I can't make it work yet. I checked the documentation from vuetify itself and some issue reports from nuxt about this topic but I'm not sure what the best approach is when using the vuetify-nuxt-module.

What would be the correct steps to modify the SASS variable of a vuetify-compent?

Any help much appreciated!

[HendrikJan]

I am having the same problem.

Some SASS variables can be edited (like $button-border-radius) but variables that have to do with fonts cannot be edited (like $body-font-family).

The variables that can be edited, can be edited in this way:

// nuxt.config.js
vuetify: {
    moduleOptions: {
      styles: { configFile: 'assets/vuetify.scss' }
    }
}

And the scss file:

@use 'vuetify' with (

  // This variable can be changed
  $grid-breakpoints: (xs: 0,
    sm: 768px,
    md: 992px,
    lg: 1200px,
    xl: 1900px),

  // This variable cannot be changed
  $body-font-family: 'Open Sans' sans-serif,
);

If someone knows how to change all available variable, and specifically the font settings, please help!

[userquin]

check nuxt channel in vuetify discord server: https://discord.com/channels/340160225338195969/1198016523873308745

[GitTheCodeAndHitTheRoad]

I am having the same problem.

Some SASS variables can be edited (like $button-border-radius) but variables that have to do with fonts cannot be edited (like $body-font-family).

The variables that can be edited, can be edited in this way:

// nuxt.config.js
vuetify: {
    moduleOptions: {
      styles: { configFile: 'assets/vuetify.scss' }
    }
}

And the scss file:

@use 'vuetify' with (

  // This variable can be changed
  $grid-breakpoints: (xs: 0,
    sm: 768px,
    md: 992px,
    lg: 1200px,
    xl: 1900px),

  // This variable cannot be changed
  $body-font-family: 'Open Sans' sans-serif,
);

If someone knows how to change all available variable, and specifically the font settings, please help!

Thank you for the suggestion. I am still getting an error about the fact that the module is alreadt loaded:
Internal server error: [sass] Module loop: this module is already being loaded.

How did you solve this?

[HendrikJan]

I am having the same problem.
Some SASS variables can be edited (like $button-border-radius) but variables that have to do with fonts cannot be edited (like $body-font-family).
The variables that can be edited, can be edited in this way:

// nuxt.config.js
vuetify: {
    moduleOptions: {
      styles: { configFile: 'assets/vuetify.scss' }
    }
}

And the scss file:

@use 'vuetify' with (

  // This variable can be changed
  $grid-breakpoints: (xs: 0,
    sm: 768px,
    md: 992px,
    lg: 1200px,
    xl: 1900px),

  // This variable cannot be changed
  $body-font-family: 'Open Sans' sans-serif,
);

If someone knows how to change all available variable, and specifically the font settings, please help!

Thank you for the suggestion. I am still getting an error about the fact that the module is alreadt loaded: Internal server error: [sass] Module loop: this module is already being loaded.

How did you solve this?

Oh, I mistyped something.

It works in my code with @use 'vuetify/settings'

[HendrikJan]

Another solution can be found here on Discord: https://discord.com/channels/340160225338195969/1198016523873308745/1209515947342176296

[GitTheCodeAndHitTheRoad]

Oh, I mistyped something.

It works in my code with @use 'vuetify/settings'

Thanks for the quick reply! I also tried that before but in that case all my vuetify css is completely gone. Could it be that it is needed to first import the whole 'default' css file and only overwrite the desired SASS variables?

[HendrikJan]

I don't know. Maybe you need to add css: ['@assets/vuetify.scss'] to nuxt.config. It made a difference in another scenario for me, but I'm a bit clueless as to how it works exactly.

You could als have a look in the Vuetify Discord. Some other suggestions are given there.

[jTiKey]

#204 seems to solve this:

v0.13.2 fixes this issue, so you just need to use as follows, no additional css imports are required.

I had to update to 0.16.1 though with these scss:

@forward 'vuetify/settings' with (
    $navigation-drawer-transition-duration: 1s
);

[AndreyYolkin]

Thanks for reaching out! This is a usage question rather than a bug report. The issue tracker is now reserved for confirmed bugs and feature requests.

For usage questions and help, please use the Vuetify Discord or check the documentation. 🙏

Closing as part of issue tracker triage.