更改默认字体 Nuxt 3 + Vuetify 3 项目答案

【问题标题】：Change default font Nuxt 3 + Vuetify 3 project更改默认字体 Nuxt 3 + Vuetify 3 项目
【发布时间】：2023-01-03 17:48:45
【问题描述】：

我一直在谷歌搜索，但我似乎无法找到答案。我经常感到问题是，也许还没有人使用 Nuxt 3 + Vuetify 3 组合？

我正在尝试添加自定义默认字体。我已经通过 nuxt.config.ts 尝试过它，就像我以前使用 Nuxt 2 一样。

vuetify: {
    customVariables: ["~/assets/variables.scss"],
    treeShake: true,
  },

但它不起作用。

我目前正在使用plugins/vuetify.ts 来定义主题和颜色。我觉得应该放在里面。但是我不知道怎么做。

import { createVuetify, ThemeDefinition } from "vuetify";
import * as components from "vuetify/components";
import * as directives from "vuetify/directives";

import "@mdi/font/css/materialdesignicons.css";

const myTheme: ThemeDefinition = {
    dark: false,
    colors: {
        primary: "#HEXHEX",
    },
    variables: {}
};

export default defineNuxtPlugin(nuxtApp => {
    const vuetify = createVuetify({
        components,
        directives,
        theme: {
            defaultTheme: "myTheme",
            themes: {
                myTheme
            }
    },
    });

    nuxtApp.vueApp.use(vuetify);
});

主题正在运行，但我不知道如何覆盖默认字体/样式。有人处理过同样的问题并设法解决了吗？

【问题讨论】：

标签： typescript vue.js nuxt.js nuxtjs3 vuetifyjs3

【解决方案1】：

我通过在 nuxt.config.js 中手动导入一些 CSS 解决了同样的问题

// nuxt.config.js
export default defineNuxtConfig({
  css: ['vuetify/lib/styles/main.sass', '@/assets/main.css'],
  build: {
    transpile: ['vuetify'],
  },
  ...
})

在你的 CSS 文件中

/* main.css */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('./fonts/Roboto-Light.ttf') format('truetype');
}

【讨论】：

啊，就这么简单。这行得通。不过，我确实必须自己定义类。但是还有一种方法可以覆盖 $body-font-family 吗？这样做会在终端中出现错误：Error: This variable was not declared with !default in the @used module 但是当我查看 Vuetify _variables.scss 时，我确实看到了 !default 标志

【解决方案2】：

您可以通过设置 $body-font-family 变量来更改 Vuetify 3 的字体。
这需要您按照 Vuetify 文档中的描述设置 Vuetify 3 和 Nuxt 3。

目前大部分文档都可以在这里找到：SASS-variables

在 nuxt 中你需要一个 Vuetify 插件：

/* plugins/vuetify.ts */
import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'
import "vuetify/styles";

export default defineNuxtPlugin(nuxtApp => {
  const vuetify = createVuetify({
    components,
    directives,
    // Other Vuetify settings like icons go here
  })

  nuxtApp.vueApp.use(vuetify)
})

然后在nuxt.config.js你可以像这样使用这个插件

/* nuxt.config.js */
import vuetify from 'vite-plugin-vuetify'

export default defineNuxtConfig({
  css: ['@/assets/global.scss'],

  modules: [
    async (options, nuxt) => {
      nuxt.hooks.hook('vite:extendConfig', config => config.plugins.push(
        vuetify({
          styles: { configFile: new URL('assets/settings.scss', import.meta.url).pathname }
        })
      ))
    }
  ],
  
  // Other Nuxt config can go here
})

你可以在/assets/global.scss中定义一个字体：

// /assets/global.scss
// Optional global scss settings
@font-face {
  font-family: 'Open Sans';
  src: url("OpenSans-Regular-webfont.woff") format("woff");
  font-weight: 400;
  font-style: normal;
}

在 assets/settings.scss 中，您可以更改 Vuetify SCSS 变量：

// /assets/settings.scss
// Specific Vuetify settings
@use 'vuetify/settings' with (
    $utilities: false,
    $button-height: 40px,
    $body-font-family: 'Open Sans'
);

如果你在/node_modules/vuetify中搜索$body-font-family，你可以找到一些其他变量来修改Vuetify字体。

【讨论】：