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    

├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
└── [email protected]

[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';

?

[userquin]

I'm not a SASS expert, you should try also building the reproduction and run the preview (node .output/server/index.mjs or npx serve .output/public if using nuxt build or nuxt generate respectively): IIRC some styles are in reverse order and maybe you need to patch the output build.

[santiagoaloi]

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

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

?

I'm also encountering difficulties with Sass and the vuetify-nuxt-module 🙃

Never do this in your vuetfiy Sass file:

@import 'vuetify'

Becuase it imports all of Vuetify's styles into every component, leading to:

1. Massive CSS Duplication:
2. Unnecessary styles bloat your CSS bundle, impacting performance.
3. Style Pollution: Global styles might conflict with your component-specific styles.
4. Increased Bundle Size: Larger CSS files take longer to load, slowing down your application.

Surely, there must be a better way to handle this.
If anyone has discovered a solution or workaround, I'd greatly appreciate your insights and suggestions!

[santiagoaloi]

I created an issue about this with a reproduction repo #212

[santiagoaloi]

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

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

?

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

//nuxt.config.ts
  vuetify: {
    moduleOptions: {
      styles: {
        configFile: 'assets/scss/settings.scss',
      },
    },
  },

// assets/scss/settings.scss
@forward 'vuetify/settings' with (
 // Buttons
 $button-disabled-opacity: 0.5,
);

[itelmenko]

Thank you so much! It works excellent!