Problem with component specific sass variables

[redstripes89]

Hello, I just don't get it how to work with customized sass variables both for components and global.

The documentation at https://vuetifyjs.com/en/features/sass-variables/ is not clear to me on this part.

I need to specify custom button font size, so I have been using

vuetify({ styles: { configFile: 'src/styles/settings.scss', }, })

inside vite.config.mts with settings.scss:

$font-families: 'Mukta', sans-serif;

@forward 'vuetify/settings' with (
  $color-pack: true,
  $layers: true,
  $body-font-family: $font-families,
  $button-font-size: '1rem'
);

This works in dev build but production build crashes the order of css layers. It works when I disable the layer feature of course.

I switched to basic usage, moved everything except the button-font-size to a main.scss and replaced import 'vuetify/styles' with import '@/styles/main.scss' and it works with layers enabled, but then I lose the button customization.

Tried to use both techniques, but the documentation is not clear where to put the global variables and whether to just do @use './settings' in main.scss or still define the configFile aswell. Tried different combinations but I just cant get it to work.

For now I have just disabled the layer feature, but since this will become a default in the future I really like to know what I'm doing wrong and how to properly use both configuration options.

Appreciate your help 😃