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 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: , resolve: { alias: { '@': fileURLToPath(new URL('./src', import.meta.url)) } } }); a pak soubor /src/scss/variables.scss ve kterem prepisuju vybrane promenne @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 @import './variables.scss'; body { background-color: red; } table { color: $grey; } Vite pri npm run dev vypisu chybu Undefined variable. ╷ 8 │ color: $grey; │ ^^^^^ ╵ src/scss/mask.scss 8:12 root stylesheet 9:13:49 Internal server error: 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.