how to override the vuetify scss varibales in nuxt3 + vite - variables

Question

I want to override the vuetify scss variable to change the v-text-field border-radius
I tried to set up the vueitfy3 with vite-plugin-vuetify and some addition config to overriding the variables, but faced so many warnings related to vuetify:
Code sample
/* nuxt.config */
import vuetify from 'vite-plugin-vuetify'
export default defineNuxtConfig({
build: {
transpile: ['vuetify'],
},
modules: [ /* updated */
async (options, nuxt) => {
nuxt.hooks.hook('vite:extendConfig', (config) =>
config.plugins.push(
vuetify({
styles: {
configFile: 'assets/variables.scss',
},
})
)
);
}
],
vite: {
define: {
'process.env.DEBUG': false,
},
css: {
preprocessorOptions: {
scss: {
additionalData: `
#import "assets/variables.scss";
`
}
}
}
},
app: {
head: {
title: '',
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: '' },
{ name: 'format-detection', content: 'telephone=no' },
],
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
]
}
}
})
// plugins/vuetify.ts
import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'
import 'vuetify/styles'
export default defineNuxtPlugin(nuxtApp => {
const vuetify = createVuetify({
components,
directives
})
nuxtApp.vueApp.use(vuetify)
})
/* assets/variables.scss */
#use 'vuetify/settings' with ( /* updated */
$application-background: red,
$application-color: red
);
All defined varibales in the 'varibales.scss' are detected, but i want to override the vuetify varibales.

Answer 1

I tried to set up the vueitfy3 with vite-plugin-vuetify and some addition config to overriding the variables, but faced with so many warnings related to vuetify.
warrnings
nuxt.config
import vuetify from 'vite-plugin-vuetify'
export default defineNuxtConfig({
build: {
transpile: ['vuetify'],
},
modules: [
async (options, nuxt) => {
nuxt.hooks.hook('vite:extendConfig', (config) =>
// eslint-disable-next-line #typescript-eslint/ban-ts-comment
// #ts-ignore
config.plugins.push(
vuetify({
styles: {
configFile: 'assets/variables.scss',
},
})
)
);
}
],
vite: {
define: {
'process.env.DEBUG': false,
},
css: {
preprocessorOptions: {
scss: {
additionalData: `
#import "assets/variables.scss";
`
}
}
}
},
app: {
head: {
title: '',
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: '' },
{ name: 'format-detection', content: 'telephone=no' },
],
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
]
}
}
})
plugins/vuetify
import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'
import 'vuetify/styles'
export default defineNuxtPlugin(nuxtApp => {
const vuetify = createVuetify({
components,
directives
})
nuxtApp.vueApp.use(vuetify)
})
assets/variables.scss
#use 'vuetify/settings' with (
$application-background: red,
$application-color: red
);