Nuxt3 x Vuetify3の変数を書き換える方法（仮）

ことの流れ

Nuxt3 x Vuetify3の環境で、Vuetifyのデフォルトのfont-familyを上書きしたかった。

調べたところ、Vuetifyの変数を書き換えると良いことがわかった。

今回は、なんとか変数の書き換え方（仮）を編み出したので、書き留めておく。

※ただし、下のようなWARNが大量に出る…。

 WARN  Sourcemap for "plugin-vuetify:components/VKbd/VKbd.sass" points to missing source files

なお、Nuxt3でVuetify3を使う方法は以下の記事を参照されたし。

Nuxt3でVuetify3を使おうとしたら躓いた
Nuxt3でVuetify3を使おうとしたら躓いて、解決したので書き残します。
pomaika.net
2023.05.04

やったこと

settings.scss

assetsディレクトリの中にsettings.scssを作成する。

今回はBIZ UDPGothicを設定したいので、以下のように書く。

$font: "BIZ UDPGothic", sans-serif;

@use "vuetify/settings" with (
  $body-font-family: $font
);

main.scss

下記の読み込みを削除する。※削除だよ！！

@use "vuetify/styles";

vuetify.ts

２で削除したVuetifyの大元？になるファイルをvuetify.tsに読み込む

import "vuetify/styles";

参考までに私のvuetify.tsを貼っておく。

import { createVuetify } from "vuetify";
import { aliases, mdi } from "vuetify/iconsets/mdi-svg";
import {
  MAIN_THEME,
  mainTheme,
  MAIN_DARK_THEME,
  mainDarkTheme,
} from "@/helpers/themes";
import { defaults } from "@/helpers/defaults";
import * as components from "vuetify/components";
import * as directives from "vuetify/directives";
import "vuetify/styles";

export default defineNuxtPlugin((nuxtApp) => {
  const vuetify = createVuetify({
    components,
    directives,
    ssr: true,
    defaults,
    display: {
      mobileBreakpoint: "sm",
    },
    icons: {
      defaultSet: "mdi",
      aliases,
      sets: {
        mdi,
      },
    },
    theme: {
      defaultTheme: MAIN_DARK_THEME,
      themes: {
        mainTheme,
        mainDarkTheme,
      },
      variations: {
        colors: ["primary", "secondary", "accent"],
        lighten: 9,
        darken: 9,
      },
    },
  });
  nuxtApp.vueApp.use(vuetify);
});

nuxt.config.ts

Google Fontsより、linkタグをコピーし、設定。

BIZ UDPGothicの場合は下のようになった。

  app: {
    head: {
      link: [
        {
          rel: "preconnect",
          href: "https://fonts.googleapis.com",
        },
        {
          rel: "stylesheet",
          href: "https://fonts.gstatic.com",
          crossorigin: "anonymous",
        },
        {
          rel: "stylesheet",
          href: "https://fonts.googleapis.com/css2?family=BIZ+UDPGothic:wght@400;700&display=swap",
        },
      ],
    },
  },

続いて、hooksの部分を修正。

※私の場合、srcDirをappに変更しているので、頭にapp/をつけているが、通常はいらない。

  hooks: {
    "vite:extendConfig": (config) => {
      config.plugins!.push(
        vuetify({
          styles: {
            configFile: new URL("app/assets/settings.scss", import.meta.url).pathname,
          },
        })
      );
    },
  },

表示確認

念のため表示確認を。

感想

WARNをなくしたい。すごく邪魔。

タイトルとURLをコピーしました