cannot override Vuetify variables

I want do override some variables from Vuetify. I create /src/scss/variables.scss file:

// /src/scss/variables.scss
$material-light: (
  'background': '#3262cc',  
);
$grey: (
  'base': '#aabbaa'
);
$grid-breakpoints: (
  'xs': 0,
  'sm': 600px,
  'md': 960px,
  'lg': 1280px,
  'xl': 1400px
)

File vite.config.js

// /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: [
    vue(),
    vuetify({ 
      styles: { 
        configFile: '/src/scss/variables.scss' 
      }
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
 });

File /src/plugins/vuetify.js

// /src/plugins/vuetify.js
// Styles
import '@mdi/font/css/materialdesignicons.css'
import 'vuetify/styles'
//import 'vuetify/dist/vuetify.min.css'

// Vuetify
import { createVuetify } from 'vuetify'

export default createVuetify(
  // https://vuetifyjs.com/en/introduction/why-vuetify/#feature-guides
)

May I ask where the error is that the user variables from variables.scss are not reflected?