vuetify-nuxt-module: Unable to Use Vuetify Sass Variables

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 (