vuetifyjs/nuxt-module

Settings file isn't applied after run 'dev' command

Opened this issue · 6 comments

For some reason, the settings file isn't loaded in first app load after run dev command

@use 'vuetify/settings' with (
  $body-font-family: $font-family,
  $heading-font-family: $font-family,

  $button-text-transform: capitalize,
  $button-font-weight: 500,
  $button-border-radius: 24px,
  $field-border-radius: 24px,
  $text-field-border-radius: 24px,
  $autocomplete-content-border-radius: 24px,
  $select-content-border-radius: 24px,
  $combobox-content-border-radius: 24px,
  $menu-content-border-radius: 24px,
  $tooltip-border-radius: 24px,

  $list-item-icon-opacity: 1,
);

In first load, border radius isn't 24px:
Screenshot from 2024-09-13 18-03-46

After save the settings file:

image

Additional:

After change the page, this problem returns, and we need to save the settings file to apply it again

iirc you need to add main.scss adding it to nuxt css entry, check https://github.com/Pinegrow/pg-nuxt-vuetify/blob/main/nuxt.config.ts#L100-L104 , https://github.com/Pinegrow/pg-nuxt-vuetify/blob/main/nuxt.config.ts#L112-L114, https://github.com/Pinegrow/pg-nuxt-vuetify/blob/main/app/assets/vuetify/main.scss and https://github.com/Pinegrow/pg-nuxt-vuetify/blob/main/app/assets/vuetify/settings.scss:

// Any variables in the sass files in this folder - https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/styles/settings/

$font-family: 'Inter var', 'Inter', 'Roboto', 'Helvetica Neue', sans-serif;

@use 'vuetify' with (
  // $utilities: false,
  // $reset: false,
  // $color-pack: false,
  $body-font-family: $font-family
);

Thank you for your attention and response
I did the change to separate these config in two files
But the bug still happening

image
image
image
image
image

After saving the file and refreshing page:
image
Need to do it in every layer ☝🏻

Is vuetify/moduleOptions.styles.configFile correct? Shouldn't it start with ./src/assets..., or use the alias @/assets...?

Any errors you notice in the terminal that's running the dev server, or in the browser console?

If you can extract out your above setup on a minimal vuetify scaffold, it will be very helpful to troubleshoot, reason being there might be something else that's causing the issue.