Vue3/Vite/Vuetify3构建报错：变量未在@used模块中用!default声明

问题根源解析 #

1. 使用@use 'vuetify/settings'无效：该模块仅包含全局基础变量（如主题色、字体），v-expansion-panel这类组件的特定变量并不在这个模块中，因此直接覆盖不会生效。
2. 使用@use 'vuetify/styles' with报错：vuetify/styles是总样式入口，其中组件级变量大多未声明!default，不符合@use ... with语法的要求，因此会抛出*Error: This variable was not declared with !default in the @used module*错误。

正确实现方式 #

方式1：通过组件专属变量模块覆盖 #

Vuetify3的每个组件都有独立的变量文件，针对v-expansion-panel：

1. 在项目全局SASS文件（比如src/styles/variables.scss）中，先引入组件变量模块并覆盖目标值，再引入核心样式：

// 引入v-expansion-panel的变量模块，直接覆盖指定变量
@use 'vuetify/components/VExpansionPanel/VExpansionPanel' with (
  $expansion-panel-title-active-min-height: 48px // 替换为你需要的高度
);

// 加载Vuetify核心样式
@use 'vuetify/styles';

2. 在vite.config.js中配置全局样式文件，确保编译时优先加载：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vuetify from 'vite-plugin-vuetify'

export default defineConfig({
  plugins: [
    vue(),
    vuetify({
      styles: {
        configFile: 'src/styles/variables.scss'
      }
    })
  ]
})

方式2：自定义CSS类强制覆盖 #

如果SASS变量方案没效果，直接用CSS优先级覆盖默认样式：

// 全局样式文件中添加
.custom-expansion-panel .v-expansion-panel-title--active {
  min-height: 48px; // 按需调整高度
}

在组件中应用类名：

<v-expansion-panel class="custom-expansion-panel">
  <!-- 面板内容 -->
</v-expansion-panel>

注意事项 #

• 确保Vuetify版本在3.3及以上，变量结构更稳定。
• 不要混用vuetify/settings和vuetify/styles的覆盖方式，避免样式冲突。

内容的提问来源于stack exchange，提问作者Joel