Vuetify SASS variables don't work and broke styles

[itelmenko]

I try to use SASS variables. But it don't work and broke styles. I see black borders for inputs. But I didn't add their.

frontend/assets/css/custom/settings.scss:

@use 'vuetify/settings' with (
  $button-height: 50px,
  $messages-font-size: 0.85rem,
  $input-details-font-size: 0.85rem,
  $messages-min-height: 0.9rem,
  $input-details-font-weight: 300,
  $text-field-details-padding-inline: 0px
);

In frontend/nuxt.config.ts:

...
moduleOptions: {
            styles: {
                configFile: 'assets/css/custom/settings.scss',
            },
        },
...

If I remove moduleOptions's content, black borders go away.

vuetify-nuxt-module version: "0.12.0"

[itelmenko]

Minimal reproduction example - https://github.com/itelmenko/nuxt-vuetify-with-module-example

 % npm list    

├── nuxt@3.11.1
├── sass@1.72.0
├── typescript@5.4.3
├── vue-router@4.3.0
├── vue-tsc@1.8.27
├── vue@3.4.21
└── vuetify-nuxt-module@0.12.0

[fredimitchel]

Did you tried with @forward instead of @use ?

[itelmenko]

Yes. https://github.com/itelmenko/nuxt-vuetify-with-module-example/blob/main/assets/css/settings.scss

[fredimitchel]

I encounter the same behavior.
It seems that when we customize vuetify/settings, we lose every style...

[fredimitchel]

Can you try following ?

@forward 'vuetify/settings' with (
  $button-height: 50px,
  $messages-font-size: 0.85rem,
  $input-details-font-size: 0.85rem,
  $messages-min-height: 0.9rem,
  $input-details-font-weight: 300,
  $text-field-details-padding-inline: 0px
);
@import 'vuetify';

[itelmenko]

Hm.... Yes. It works

[fredimitchel]

It seems that defining a config file is fully overriding the vuetify config

[itelmenko]

Interesting... Is it correct way? Did you see it in documentation?

[fredimitchel]

@userquin ?

[userquin]

Using the reproduction with Chrome 123 just works (after an inital delay: using @use instead @forward)

(Same page styles on my local: #204 (comment))

[itelmenko]

@userquin My example works fine for you without changes?

With

@forward "vuetify/settings" with (
  $button-height: 50px,
  $messages-font-size: 0.85rem,
  $input-details-font-size: 0.85rem,
  $messages-min-height: 0.9rem,
  $input-details-font-weight: 300,
  $text-field-details-padding-inline: 0px
);

Could you attach a screen?

[userquin]

With @use:

With @forward:

[itelmenko]

Please add @import 'vuetify'; also:

@forward 'vuetify/settings' with (
  $button-height: 50px,
  $messages-font-size: 0.85rem,
  $input-details-font-size: 0.85rem,
  $messages-min-height: 0.9rem,
  $input-details-font-weight: 300,
  $text-field-details-padding-inline: 0px
);
@import 'vuetify';

Or may be you know best way?

[userquin]

[itelmenko]

Yes. I see Select was fixed on last screen.
So what is correct way?

@forward 'vuetify/settings' with (
...
);
@import 'vuetify';

?