Unable to Use Vuetify Sass Variables

[mostafaznv]

Hi.
Thank you for this excellent library. It surpasses the official vite-plugin-vuetify plugin by miles.

However, I've encountered an issue. I'm not sure if it's a bug or if something in my configuration is incorrect. I hope someone can help me.

I want to use some of Vuetify's SASS variables (such as $display-breakpoints) in my project, but I'm facing difficulties.

This is my nuxt.config.ts file:

import {defineNuxtConfig} from 'nuxt/config'


export default defineNuxtConfig({
    ssr: true,
    
    css: [
        '@/assets/styles/main.scss'
    ],
    
    experimental: {
        inlineSSRStyles: false
    },
    
    modules: [
        'vuetify-nuxt-module'
    ],
    
    vuetify: {
        moduleOptions: {
            styles: {
                configFile: 'assets/styles/vuetify.scss' // <--------- NOTICE
            }
        },
        vuetifyOptions: './vuetify.config.ts'
    },
    
    vite: {
        css: {
            preprocessorOptions: {
                scss: {
                    additionalData: `
                        @use "@/assets/styles/variables/_colors.scss" as *;
                        @use "@/assets/styles/variables/_variables.scss" as *;
                        @use "vuetify/lib/styles/settings/variables" as *; // <--------- NOTICE
                    `
                }
            }
        }
    }
})

And this is assets/styles/vuetify.scss:

$font-family: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
"Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
"Noto Color Emoji";

$size-scales: (
    'x-small': -1.75,
    'small': -1,
    'default': 0,
    'large': 1,
    'x-large': 2
);


@use "vuetify/settings" with (
    $color-pack: false,
    $body-font-family: $font-family,
    $font-size-root: 18px,
);

But I encountered this error:

500
[vite-node] [plugin:vite:css] [VITE_ERROR] ./node_modules/vuetify/lib/styles/settings/_index.sass:1:1

Error: This module was already loaded, so it can't be configured using "with".
    ┌──> node_modules/vuetify/lib/styles/settings/_index.sass
1   │   @forward './variables'
    │   ^^^^^^^^^^^^^^^^^^^^^^ new load
    ╵
    ┌──> assets/styles/vuetify.scss
4   │                           @use "vuetify/lib/styles/settings/variables" as *;
    │                           ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ original load
... │
205 │ ┌ @use "vuetify/settings" with (

[userquin]

@mostafaznv I'm not a sass/scss expert, you can check https://github.com/Pinegrow/pg-nuxt-vuetify or ask in nuxt channel in vuetify discord server

[mostafaznv]

I don't believe it's directly related to Vuetify itself.
In one of my projects using vite-plugin-vuetify, this configuration (loading Sass variables via Vite configuration) works perfectly.
It appears that files inside Vite's additionalData are loading after your package configFile, and I'm unsure how to reverse this.

Regardless, thank you for sharing that repository. I’ll take a look and hope it provides a solution.

[userquin]

@mostafaznv maybe adding a custom module reordering vite config entry...

[mostafaznv]

No, neither the pg-nuxt-vuetify solution nor the custom module worked.
It seems that Vite's preprocessorOptions runs before vuetify-nuxt-module, and when we attempt to define our custom config file through vuetify.moduleOptions.styles.configFile, it can't do it because those variables are already defined.

[TechAkayy]

Hi @mostafaznv, do you have a sample repo I can have a look? I think I encountered this in the past.

[TechAkayy]

If you look closely into https://github.com/Pinegrow/pg-nuxt-vuetify, you will notice the there are two sass files & they are configured differently to how you have in your nuxt.config.ts. Also take a note of @forward 'vuetify/settings' .. and @use 'vuetify'.. and compare with yours.

[mostafaznv]

Hi @mostafaznv, do you have a sample repo I can have a look? I think I encountered this in the past.

Hi @TechAkayy
Thank you for your reply.

this is a reproduction link:
https://stackblitz.com/edit/nuxt-starter-nbwlts?file=nuxt.config.ts

[TechAkayy]

Hey mate,

I'm not a sass expert either, my efforts have been purely trial & error. This is the best I could do - https://stackblitz.com/edit/nuxt-starter-sndsr7?file=nuxt.config.ts.

Refer to these files I have updated and compare with yours:

• nuxt.config.ts
• main.scss
• settings.scss

The below variables.scss is a new addition when compared to https://github.com/Pinegrow/pg-nuxt-vuetify. Again, this is based on my assumption that when imported via app.vue, it overrides the css/scss imports of nuxt config. Not sure if it really works. If you are an sass expert, you might probably know better than me :-)

• variables.scss (imported in app.vue)
• app.vue

You can find comment with my initial AK: in variables.scss. All the best!

[TechAkayy]

In settings.scss, try updating $button-height: 61px, to $button-height: 40px,. HMR updates the sass variable customization.

[TechAkayy]

Also, check my reply here - nuxt/nuxt#15412 (comment)

[mostafaznv]

Thank you very much, @TechAkayy.
I checked it, and it works.
However, by removing vite.css.preprocessorOptions.scss.additionalData from nuxt.config.ts, I lost access to using Vuetify Sass variables in my own SCSS files or components.

For example, in one of my Vue components, I want to write a small piece of CSS to handle responsive styling on mobile. I used to do it using this technique, but I can't do it now:

<style lang="scss">
.v-btn {
  @media #{map-get($display-breakpoints, 'sm-and-down')} {
    font-size: 12px;
  }
}
</style>

[TechAkayy]

Ohh okay.. I'm guessing there should be a way to acheive what you are trying to do.

I have updated variables.scss - https://stackblitz.com/edit/nuxt-starter-sndsr7?file=assets%2Fvariables.scss. Not sure how to test responsive sizes on stackblitz. Again, not sure if it works! You are not alone in this sassy ordeal ;-)

[mostafaznv]

Finally, it worked. Thanks ❤️

However, there is a setback here. Both vite and webpack have an option to define variables globally (using additionalData), and I'm used to defining Vuetify Sass variables globally and using them wherever I want.

However, I can't do it now, and I have to import ~/assets/settings wherever I want to use one of Vuetify's Sass variables. It requires a significant refactor in all my components.

But I think it's okay. It's nothing to stop me from using this incredible module.

---

I have an off-topic question too 😄.
How can I tell Vuetify that my template is RTL? I'm defining the locale property in vuetify.config.ts like this:

locale: {
    locale: 'fa',
    fallback: 'en',
    rtl: {
        fa: true
    },
},

However, I think it's being ignored, and my layout renders LTR.

[userquin]

@mostafaznv it seems you're using the rtl properly (from docs: https://vuetifyjs.com/en/features/internationalization/#creating-a-custom-locale), can you check virtual vuetify module configuration and check if the options are ok?

You can use Nuxt DevTools or browser dev tools (in browser check the const options = JSON.parse(...):