Vuetify: Error when overriding component-specific SASS variable

Question

I follow the official guide on how to override Vuetify SASS variables (link) which says:

Create a main.scss file in your src/styles directory and update the style import within your vuetify.js file:

src/styles/main.scss

@use 'vuetify' with (
  $app-bar-background: 'red';
);

src/plugins/vuetify.ts

import '@/styles/main.scss'

However, I receive this error message on application startup:

[sass] This variable was not declared with !default in the @used module.
  ╷
2 │     $app-bar-background: 'red'
  │     ^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  src/styles/main.scss 2:5  root stylesheet
10:58:31 AM [vite] Internal server error: [sass] This variable was not declared with !default in the @used module.
  ╷
2 │     $app-bar-background: 'red'
  │     ^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  src/styles/main.scss 2:5  root stylesheet
  Plugin: vite:css

What am I doing wrong?

Answer 1

Yes, this is a bit confusing. From what I understand, the issue comes from import order, it only affects component variables. The documentation has a section about it.

To fix it, you have to load the styles through the vuetify-loader Vite plugin (I suppose it is the same with Webpack). The documentation is a bit sparse, I'll add a word on each step:

1. Create a file with the component-specific overrides, using vuetify/settings:

// vuetify-settings.scss
@use 'vuetify/settings' with (
  $app-bar-background: 'red',
);

2. Inside Vite configuration, register the file with the vuetify-loader plugin using styles.configFile:

// vite.config.js
plugins: [
  vue(),
  vuetify({
    styles: {
      configFile: './src/vuetify-settings.scss'
    }
  }),
]

3. Switch back to the regular style import:

// plugins/vuetify.js
import 'vuetify/styles' // <----
import { createVuetify } from 'vuetify'

export default createVuetify()

Now the loader will compile the CSS file and inject it into the build.

Here it is in a sandbox