覆盖 Vuetify 2.0 sass 变量 $heading-font-family

Question

在 Vuetify 2.0.0-beta.0 中，我尝试覆盖默认变量 \(heading-font-family。这是行不通的。但是我可以覆盖例如 \)body-font-family、\(font-size-root 或 \)btn-border-radius。

我遵循了 https://next.vuetifyjs.com/en/framework/theme 的文档

我的 main.scss 看起来像这样：

// main.scss

@import '~vuetify/src/styles/styles.sass';

// The variables I want to modify
$font-size-root: 16px;
$body-font-family: Arial, sans-serif;
$heading-font-family: 'Open Sans', sans-serif;
$btn-border-radius: 8px;

我的 .vue 文件有一个带有这个 HTML 的模板：

 // in my vue Template

...
<div class="hello">
  <h1 class="display-1">{{ msg }}</h1>
  <p>Lorem ipsum dolor sit amet...</p>
  <v-btn color="pink" dark>Click me</v-btn>
</div>
...

当我在控制台中检查 H1 时，我希望它有一个“Open Sans”字体系列，即 sans-serif。相反，我看到了“Roboto”，无衬线字体。这是 $body-font-family 在我的自定义 main.scss 中被覆盖之前的默认值

正如我所说，我的 main.scss 中的其他覆盖工作正常。我在这里做错了什么？

原文由 Wim T 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

问题是由 !important 上的 font-family 引起的，用于 vuetify 排版助手类。

我的解决方案是在我的 variables.scss 文件中实现相同级别的 css 特异性，并且因为它是在 vuetify 排版辅助类之后加载的，所以它将覆盖它们。

我的 variables.scss 文件：

 //all variable changes need to happen before @import
$body-font-family: 'Source Sans Pro', sans-serif !important;
//specificity needs to be taken into consideration for some components
//because !important has been assigned to their css
//https://dev.to/emmabostian/css-specificity-1kca
html,
body,
.v-application {
  font-family: $body-font-family;
}
//added all typography helper classes because of css specificity override
//https://vuetifyjs.com/en/styles/typography#typography
.v-application {
    .display-4,
    .display-3,
    .display-2,
    .display-1,
    .headline,
    .title,
    .subtitle-1,
    .subtitle-2,
    .body-1,
    .body-2,
    .caption,
    .overline
    {
        font-family: $body-font-family;
    }
}
@import '~vuetify/src/styles/settings/_variables.scss';

如果这对您不起作用，请检查默认为 Roboto 字体的元素，单击 font-family 属性并查看导致该问题的 css 类，然后将这些类添加到 variables.scss 中的 css 选择器中 --- 文件（例如 .v-application .title ）

原文由 Dusan Cankovic 发布，翻译遵循 CC BY-SA 4.0 许可协议