我一直在谷歌搜索，但我似乎無法找到答案。我經常覺得問題是也許沒有人使用 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);
});
主題正在運行，但我不知道如何覆寫默認字體/樣式。任何人都處理過同樣的問題并設法解決它？
uj5u.com熱心網友回復：
我通過在nuxt.config.js
// 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');
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/507933.html
標籤：打字稿 Vue.js nuxt.js nuxtjs3 Vuetifyjs3