Vuetify Vue CLI3 项目中的 Phanto .application 样式

Question

我有一个使用 Vue CLI3 启动的 vuetify 项目。

我看到我的正文字体被一个名为 .application 的类覆盖 这种类风格无处可寻，这让我相信它是框架自带的。

我还有一个名为 vuetify.ts 的文件，内容如下：

import Vue from 'vue'
import Vuetify from 'vuetify/lib'
import 'vuetify/src/stylus/app.styl'

Vue.use(Vuetify, {
  iconfont: 'md',
})

如何添加自定义的已制作 scss 文件作为主要样式表，包括覆盖框架字体系列等？

我尝试了这个不起作用的解决方案：https://medium.com/@jacobedawson/vuetify-vue-cli-3-change-default-font-a70c22adc55

谢谢！

编辑

这是我现有的一些现成的 scss 文件。

@import url("https://use.typekit.net/upu2cxc.css");
$font-family-sans-serif:      proxima-nova, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
$font-family-sans-serif-extra-condensed:  proxima-nova-extra-condensed,  -apple-system, sans-serif;

$font-family-monospace:       SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
$font-family-serif:           Georgia, serif;
$font-family-base:            $font-family-sans-serif;
...

Answer 1

在标准的 vue cli 框架中，app.vue 文件对于应用级样式来说是一个很好的source of truth。

在app.vue

<style lang='scss'>
@import url("https://use.typekit.net/upu2cxc.css");
$font-family-sans-serif:      proxima-nova, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
$font-family-sans-serif-extra-condensed:  proxima-nova-extra-condensed,  -apple-system, sans-serif;

$font-family-monospace:       SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
$font-family-serif:           Georgia, serif;
$font-family-base:            $font-family-sans-serif;
</style>