vuetifyjs / nuxt-module

Zero-config Nuxt Module for Vuetify
https://nuxt.vuetifyjs.com/
MIT License
220 stars 22 forks source link

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

Open linspw opened 1 month ago

linspw commented 1 month ago

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

userquin commented 1 month ago

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
);
userquin commented 1 month ago

Remember to disable vuetify styles: https://github.com/Pinegrow/pg-nuxt-vuetify/blob/main/nuxt.config.ts#L109-L110

linspw commented 1 month ago

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 ☝🏻

TechAkayy commented 1 month ago

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

TechAkayy commented 1 month ago

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

TechAkayy commented 1 month ago

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.