Setting custom SASS variable often fails (using vite)

[jhh-ncurity]

After setting custom sass variable using: https://github.com/vuetifyjs/vuetify-loader/tree/next/packages/vite-plugin#customising-variables

If I run npm run dev, I get this error in console:

But this doesn't happen everytime. Sometimes I get no errors but intial page loads slower than usual. I wanna know if this(slow init) is normal too.

You can reproduce this error by scaffolding vuetify application with npm create vuetify, then set custom SASS variable by method linked above(offical doc).

Here is my config:

// vite.config.js

export default defineConfig({
  plugins: [
    vue(),
    // https://github.com/vuetifyjs/vuetify-loader/tree/next/packages/vite-plugin
    vuetify({
      styles: { configFile: 'src/settings.scss' }
    })
  ],
//...and rest are defaults

// src/settings.scss
@use 'vuetify/settings' with (
    $font-size-root: 40px, 
);

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

import { createVuetify } from 'vuetify'

export default createVuetify({
  theme: {
    themes: {
      light: {
        colors: {
          primary: '#1867C0',
          secondary: '#5CBBF6',
        },
      },
    },
  },
})

[carlosmouracorreia]

Did you find a way? I'm going through the same, using Nuxt3, and not alone:

https://github.com/nuxt/nuxt.js/issues/15412

[carlosmouracorreia]

Any news on this @jhh-ncurity ? The steps to reproduce it are on the Nuxt Issue above @KaelWD

[nass600]

Still happening, has anyone found a fix?