如何为 Nuxt 3 设置 Vuetify 3？

Question

我遵循了本指南https://codybontecou.com/how-to-use-vuetify-with-nuxt-3.html，没有Customize Sass Variables部分。我安装了软件包

• 验证
• 萨斯
• @mdi/字体

在 vuetify.ts 包含的插件目录中

import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'

export default defineNuxtPlugin(nuxtApp => {
    const vuetify = createVuetify({
        ssr: true,
        components,
        directives,
    })

    nuxtApp.vueApp.use(vuetify)
})

nuxt.config.ts 包含

export default defineNuxtConfig({
    css: ['vuetify/lib/styles/main.sass', '@mdi/font/css/materialdesignicons.min.css'],
    build: {
        transpile: ['vuetify']
    }
});

我在 app.vue 中尝试使用以下代码进行设置

<script setup lang="ts">
import { VApp, VAppBar, VMain, VBtn } from "vuetify/components";
</script>

<template>
    <v-app>
        <v-app-bar title="App bar goes here"></v-app-bar>

        <v-main>
            <v-btn color="primary" prepend-icon="mdi-vuetify">Main content goes here</v-btn>

            <v-btn prepend-icon="mdi-check-circle" append-icon="mdi-account-circle">
                <template v-slot:prepend>
                    <v-icon color="success"></v-icon>
                </template>

                Button

                <template v-slot:append>
                    <v-icon color="warning"></v-icon>
                </template>
            </v-btn>
        </v-main>
    </v-app>
</template>

我得到以下结果

我想我遗漏了什么，因为字体看起来太小了，按钮的字体应该类似于

我试图操纵样式，我认为我的按钮缺少 600 的字体粗细。所以我的应用程序可能不会导入一些 css 类。