Vue3/Vite/Vuetify 3 Build Error:变量没有在@used模块中使用!default声明.&l

Question

我正在尝试在Vue 3, Vite 3, Vite构建中实现SASS变量，并且遇到关于未使用!default声明变量的错误

我按照Vuetify 3文档中设置SASS变量的说明，并试图为扩展面板活动标题高度添加变量覆盖

// 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" }
})
]

我最初尝试使用@use 'vuetify/settings'与这些设置，但这导致没有变化。但如果我保留这个，构建失败与Error: This variable was not declared with !default in the @used module

任何帮助我做错了，我将不胜感激，我不确定如果我错过了什么，或者如果只是误读文件

Answer 1

我也遇到了同样的问题，尽管这是文档。我的工作解决方案是在"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,
)

除了这个变化，重要的是导入"vuetify/styles"在"src/插件/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">