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>

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

1 个答案: