nuxt3 + vuetify3: not able to overwrite component sass variables

[falko-apheris]

I have tried many variants but I am unable to overwrite component SASS variables. Here is my current attempt.

nuxt.config.ts

import vuetify from 'vite-plugin-vuetify';
export default defineNuxtConfig({
	modules: [
		async (options, nuxt) => {
			nuxt.hooks.hook('vite:extendConfig', (config) =>
				config.plugins.push(vuetify({styles: { configFile: './assets/variables.scss' }}))
			);
		},
	],
});

~/plugins/1.vuetify.ts

import 'vuetify/styles'
export default defineNuxtPlugin(({ vueApp }) => {
	const vuetify = createVuetify();
	vueApp.use(vuetify);
});

~/assets/variables.scss

@use 'vuetify/settings' with (
	// works
	$font-size-root: 16px,
	
	// does not work 
	// [vite] Internal server error: [sass] This variable was not declared with !default in the @used module.
	$application-color: $primary,
);

I would appreciate your help, or a hint where to go if this is not the appropriate location for my issue.

[falko-apheris]

Awesome, thanks @KaelWD

[Dinuz]

@KaelWD This works perfectly, except it generates a series of warning about sourcemap missing for each component used. For example: Sourcemap for "plugin-vuetify:styles/main.sass" points to missing source files or Sourcemap for "plugin-vuetify:components/VResponsive/VResponsive.sass" points to missing source files .

How I prevent the Warning? My setting is exactly like @falko-apheris .

[ElYaiko]

I got the same warnings too in 3.1.3

[fahmifitu]

3.1.4 with the same warnings

[KaelWD]

vuetifyjs/vuetify-loader#290