vuetify-nuxt-module: Vuetify SASS variables don't work and broke styles

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',
            },
        },
...

vuetify_black_borders

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

vuetify_without_variables

vuetify-nuxt-module version: “0.12.0”

About this issue

Original URL
State: closed
Created 4 months ago
Comments: 20 (7 by maintainers)

Commits related to this issue

Обновление vuetify-nuxt-module: npm install -D vuetify-nuxt-module@"^0.13.0" https://github.com/userquin/vuetify-nuxt-module/issues/204 — committed to itelmenko/nuxt-vuetify-with-module-example by itelmenko 3 months ago

Most upvoted comments

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,
);

santiagoaloi on Apr 8, 2024

Thank you so much! It works excellent!

itelmenko on Apr 9, 2024

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:

Massive CSS Duplication:
Unnecessary styles bloat your CSS bundle, impacting performance.
Style Pollution: Global styles might conflict with your component-specific styles.
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 on Apr 4, 2024