vuetifyjs/nuxt-module

SASS Customization Issue Causing UI Disruption in Vuetify Theme Configuration

Closed this issue · 2 comments

santiagoaloi commented

Issue Details:

  • Operating System: Darwin
  • Node Version: v21.2.0
  • Nuxt Version: 3.11.2
  • CLI Version: 3.11.1
  • Nitro Version: 2.9.6
  • Package Manager: pnpm@8.9.2
  • Builder: -
  • User Config: modules, ssr, vuetify, css, nitro, routeRules, unocss, lodash, image, colorMode, imports, components, vite, sourcemap, features, experimental, devtools
  • Runtime Modules: @unocss/nuxt@0.58.9, @vueuse/nuxt@10.9.0, @nuxtjs/tailwindcss@6.11.4, @nuxtjs/color-mode@3.3.3, vuetify-nuxt-module@0.5.16, @nuxt/image@1.3.0-28493895.369b747, nuxt-lodash@2.5.3
  • Build Modules: -

Github repo
Live showing the issue with custom SASS

I would like to bring to your attention an issue regarding SASS customization in our Vuetify theme configuration.

Currently, when attempting to customize the theme using SASS, it inadvertently disrupts the UI instead of applying the desired changes.

Description:

The problem arises when trying to customize the Vuetify theme using SASS.

Symptoms:

Instead of applying the intended customizations, the UI becomes disrupted, breaking styles and causing functional issues.
Impact: This issue significantly affects the user experience and usability of our application.

Steps to Reproduce:

Attempt to customize the Vuetify theme using SASS.
Observe the unintended disruption of the UI and broken styles.

nuxt.config.ts

  vuetify: {
    moduleOptions: {
      styles: {
    // This section has been problematic as it inadvertently disrupts the UI rather than customizing the Vuetify theme as intended.
    // By commenting out the settings below, the UI functions as expected without any style disruptions. However,
    // this means sacrificing /the ability to customize using SASS.
        configFile: 'assets/scss/settings.scss',
      },
    },
  },

settings.scss

@forward 'vuetify/settings' with (
  // Buttons
  $button-disabled-opacity: 0.5,
  $button-disabled-overlay: 0.1,
  $button-text-transform: '',
  $button-text-letter-spacing: 0px,
);

Expected Behavior:

Customizing the Vuetify theme using SASS should apply the desired changes without causing any disruption to the UI or breaking styles.

Comparison: Normal UI vs. UI with Custom SASS Application

Working

Screenshot 2024-04-05 at 03 29 59

Broken

broken

Workaround:

Commenting out the SASS customization settings restores normal functionality,
but this means sacrificing the ability to customize using SASS, which is not an ideal solution.

santiagoaloi commented

I got inspired by #172 - By importing Vuetify styles in the following manner, I managed to resolve the broken UI.

Although it introduces a minor CSS duplication issue, the solution still maintains a high level of performance.
it would be beneficial to explore alternative approaches for a more robust solution.

nuxt.config.ts

css: [
  'vuetify/styles',
],
santiagoaloi commented

Submitted a PR proposing a permanent fix for SASS customization issues 🙌
#213

  • 🎉2