Issues while upgrading code from Vuetify2/Nuxt2 to Vuetify3/Nuxy3?

Question

I have a codebase for a vuetify theme which was made for Nuxt 2 using Vuetify 2. I was trying to upgrade it to Nuxt 3/Vuetify 3 but I have run into an issue. The issue occurs when using custom sass variables for Vuetify. Below is how the variables were defined in Nuxt2/Vuetify2 version:

nuxt.config.js

export default {
    ...
    buildModules: [
        ['@nuxtjs/vuetify', {
          customVariables: ['~/assets/scss/vuetify/variables/_index.scss'],
          ...
        }]
    ]
    ...
}

_index.scss

@import './_colors';

@import './_global';
@import './_font';
@import './_elevations';
@import './_mixins';
@import './_utilities';

@import './_light';
@import './_dark';

In nuxt3 I am making the following changes to the nuxt config

nuxt.config.ts

export default defineNuxtConfig({
  vuetify: {
    moduleOptions: {
      /* module specific options */
      styles: {
        configFile: '~/assets/scss/vuetify/variables/_index.scss'
      }
    }
  }
})

The _index.scss needs to have @use @with now I think, which I read from the documents but then I will have to define all the variables in the same file. Is it possible to split variables like before into different files.