Vue3/Vite/Vuetify 3 Build Error: Variable was not declared with !default in the @used module

Question

I am attempting to implement SASS Variables in Vue 3, Vuetify 3, Vite build and am encountering an error about variables not being declared with !default

I followed the instructions in the Vuetify 3 documentations for setting up SASS Variables and am attempting to put in a variable override for the expansion panel active title height

// src/styles/settings.scss
@use 'vuetify/styles' with (
  $expansion-panel-active-title-min-height: 48px
)

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

I had initially tried using @use 'vuetify/settings' with those settings, but this resulted in no change. But if I keep this in, the build fails with Error: This variable was not declared with !default in the @used module

Any help for what I'm doing wrong would be appreciated, I'm not sure if I'm missing something or if just misreading the documents

Thorncombe

I have the same problem trying to edit the $heading-font-family. In the node module's _variables.scss however I do see the !default flag – Dinka

Answer 1

I had the same problem, althought it's documentation. My working solution is a small change in "src/styles/settings":

// src/styles/settings.scss
@use 'vuetify/settings' with (
    // Place SASS variable overrides here
    $expansion-panel-active-title-min-height: 48px,
    $font-size-root: 18px,
    $border-radius-root: 12px,
)

Besides this change, it was important to import "vuetify/styles" in "src/plugin/vuetify.js":

...
import "vuetify/styles";
import "@/styles/fonts.scss";
// import "@/styles/settings.scss";
import "@/styles/main.scss";
import "@mdi/font/css/materialdesignicons.css";

import { createVuetify } from "vuetify";
...

"vite.config.js|ts" is the same.

Gauhati

Took me so long to find this answer. Thanks @Gauhati ! – Burns

Note that the documentation states that 'vuetify/styles' should not be used in sass files as it resolves to precompiled css (vitejs/vite#7809 ). 'vuetify' and 'vuetify/settings' are valid and safe to use – Underworld

Exactly! The docs said that 'vuetify/styles' should be omitted because it points to "css" files containing styles. – Timothee

This is almost the correct answer, but with me it worked only by modifying the vite.config, follow this other answer https://mcmap.net/q/1169278/-vuetify-error-when-overriding-component-specific-sass-variable – Frymire

Doing this will cause the initial load to be super slow. As the documentation states 'vuetify/styles' should be omitted – Potassium