Vue 3/Vite/验证3构建错误:在@used模块中未使用!default声明变量

ddrv8njm  于 2023-01-17  发布在  Vue.js
关注(0)|答案(1)|浏览(710)

我尝试在Vue 3、Vuetify 3、Vite build中实现SASS变量,但遇到一个关于变量未使用! default声明的错误
我按照in the Vuetify 3 documentations的说明设置了SASS变量,并尝试为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" }
  })
]

我最初尝试使用@use 'vuetify/settings'的这些设置,但结果没有变化。
任何帮助我做错了什么将不胜感激,我不知道我是否错过了什么或如果只是误读了文件

olmpazwi

olmpazwi1#

我也遇到过同样的问题,虽然是文档化的问题。我的解决方案是在“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";
...

“虚拟配置|ts”是相同的。

相关问题