How to use sass variable of vuetify/settings, and vuetify at once?

[bhbghghbgb]

I can't get using both @use 'vuetify' ($layers), and @use 'vuetify/settings' ($color-pack) to work correctly.

@/styles/layers.css

@layer theme, base, components, vuetify, utilities;

@/plugins/vuetify

import { createVuetify } from 'vuetify'
import { aliases, mdi } from 'vuetify/iconsets/mdi-svg'

export default createVuetify({
  theme: { defaultTheme: 'dark' },
  icons: {
    defaultSet: 'mdi',
    aliases,
    sets: {
      mdi,
    },
  },
})

@/styles/vuetify-settings.scss

@use 'vuetify/settings' with (
  $layers: true
);

@/styles/vuetify-css.scss

@use 'vuetify' with (
  $color-pack: false
);

@/styles/main.css

@import 'tailwindcss';

@/main.ts

import { createApp } from 'vue'

// imports tries below

import App from '@/App.vue'

const app = createApp(App)
app.use(vuetify)

app.mount('#app')

vite.config.ts

    vuetify({
      styles: {
        configFile: 'src/styles/vuetify-settings.scss',
      },
    }),

I have tried these combinations:

1. imports in main.ts in following order, style.configFile is set

import '@/styles/layers.css'
import vuetify from '@/plugins/vuetify'
import '@/styles/vuetify-css.scss'
import '@/styles/main.css'

result: @use 'vuetify' is not caught, and global css breaks everything


2. same as 1, but @use 'vuetify' first

import '@/styles/layers.css'
import '@/styles/vuetify-css.scss'
import vuetify from '@/plugins/vuetify'
import '@/styles/main.css'

result: same as 1
3. not using @use 'vuetify', style.configFile is set

import '@/styles/layers.css'
import vuetify from '@/plugins/vuetify'
import '@/styles/main.css'

result: global css reset, colors, utilities etc are not loaded


4. use import 'vuetify/styles' instead of @use 'vuetify', style.configFile is set

import '@/styles/layers.css'
import 'vuetify/styles'
import vuetify from '@/plugins/vuetify'
import '@/styles/main.css'

result: looks normal, layers are setup, but of course the $color-pack: false is not applied, trying to import '@/styles/vuetify-css.scss' again cause same problem as 1.

5. not using style.configFile, and import the settings file instead

import '@/styles/layers.css'
import vuetify from '@/plugins/vuetify'
import '@/styles/vuetify-settings.scss'
import '@/styles/vuetify-css.scss'
import '@/styles/main.css'

result: looks normal, but $layers: true has no effect. Swapping the import order of '@/styles/vuetify-css.scss' and '@/styles/vuetify-settings.scss' has same result.
6. put the @use 'vuetify' in the setting file

@use 'vuetify' with (
  $color-pack: false
);

@use 'vuetify/settings' with (
  $layers: true
);

result: [plugin:vite:css] [sass] Error: This module was already loaded, so it can't be configured using "with".

in short: the style.configFile works and picks up @use 'vuetify/settings', however @use 'vuetify' inside this file causes the already loaded error. $layers: true does not take effect for @use 'vuetify' in another file, it will take effect if using import 'vuetify/styles', but then how to configure sass variables (such as $color-pack) for it?

[KaelWD]

You can put them both in vuetify/settings:

@/styles/vuetify-settings.scss

@forward 'vuetify/settings' with (
  $color-pack: false,
  $layers: true
);

@/styles/vuetify-css.scss

@use './vuetify-settings';
@use 'vuetify';

@/main.ts

import { createApp } from 'vue'

import '@/styles/layers.css'
import '@/styles/vuetify-css.scss'

import App from '@/App.vue'

const app = createApp(App)
app.use(vuetify)

app.mount('#app')

And you don't even need vuetify-css.scss if you aren't doing anything else with it, just replace that with import 'vuetify/styles'