Vue3/Vite/Vuetify 3 构建错误：在 @used 模块中未使用 !default 声明变量

Question

我正在尝试在 Vue 3、Vuetify 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,
)

除了这一更改之外，在“src/plugin/vuetify.js”中导入“vuetify/styles”也很重要：

...
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”是一样的。