vuetify-nuxt-module icon indicating copy to clipboard operation
vuetify-nuxt-module copied to clipboard

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

Open linspw opened this issue 1 year ago • 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

linspw avatar Sep 13 '24 23:09 linspw

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 avatar Sep 15 '24 12:09 userquin

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

userquin avatar Sep 15 '24 12:09 userquin

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

linspw avatar Sep 18 '24 16:09 linspw

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

TechAkayy avatar Sep 18 '24 21:09 TechAkayy

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

TechAkayy avatar Sep 18 '24 21:09 TechAkayy

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.

TechAkayy avatar Sep 19 '24 01:09 TechAkayy