Vuetify, přepisování default variables

Ahoj, jsem samouk s Vuetify a trošku víc jsem se do toho zamotal.

Mám Vue3 + vite + vuetify a můj základní požadavek je přepsat některé defaultní proměnné z Vuetify a následně proměnné používat v scss souboru.

Mam soubor vite.config.js

Kód:

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://github.com/vuetifyjs/vuetify-loader/tree/next/packages/vite-plugin
import vuetify from 'vite-plugin-vuetify'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
       vue(),
       vuetify({ 
      //autoImport: true, 
      styles: { 
        configFile: 'src/scss/variables.scss' 
      }
    }),
	],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
});

a pak soubor /src/scss/variables.scss ve kterem prepisuju vybrane promenne

Kód:

@use 'vuetify/settings' with (
    $material-light: (
        'background': '#3262cc',  
    ),
    $grey: (
        'base': '#aabbaa'
    ),
    $grid-breakpoints: (
        'xs': 0,
        'sm': 600px,
        'md': 960px,
        'lg': 1280px,
        'xl': 1400px
    )
);

a nasledne /src/scss/mask.scss ve kterem chci s defaultnima (pro Vuetify) i custom promennymi pracovat

Kód:

@import './variables.scss';

body {
    background-color: red;
}

table {
    color: $grey;
}

Vite pri

Kód:

npm run dev

vypisu chybu

Kód:

[sass] Undefined variable.
  ╷
8 │     color: $grey;
  │            ^^^^^
  ╵
  src/scss/mask.scss 8:12  root stylesheet
9:13:49 [vite] Internal server error: [sass] Undefined variable.
  ╷
8 │     color: $grey;
  │            ^^^^^
  ╵
  src/scss/mask.scss 8:12  root stylesheet

Hlavni cil je v mask.scss pracovat s promennymi z Vuetify (jak default), tak modifikovanymi. Poradite mi co delam spatne, prosim?

Diky, O.