覆盖 Vuetify 2.0 sass 变量 $heading-font-family [英] Override Vuetify 2.0 sass variable $heading-font-family

问题描述

在 Vuetify 2.0.0-beta.0 中，我尝试覆盖默认变量 $heading-font-family.这不起作用.但是我可以覆盖例如$body-font-family、$font-size-root 或 $btn-border-radius.

In Vuetify 2.0.0-beta.0 I try to override the default variable $heading-font-family. This isn't working. However I can override e.g. $body-font-family, $font-size-root or $btn-border-radius.

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

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

My main.scss looks like this:

我的 .vue 文件有一个包含此 HTML 的模板:

// 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;

My .vue file has a template with this HTML:

...

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

When I inspect the H1 in the console, I expect it to have a font family of 'Open Sans', sans-serif. Instead I see "Roboto", sans-serif. This was the default value of $body-font-family before it was overridden in my custom main.scss

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

As I said, the other overrides from my main.scss are working fine. What am I doing wrong here?

推荐答案

我已经尝试了这里提供的所有解决方案，但没有任何效果.

I've tried all the solutions presented here but nothing worked.

在此之后做了什么工作https://vuetifyjs.com/en/customization/sass-变量

在 src(不是/src/styles/scss/或任何其他变体)中创建一个目录 scss.然后放置您的新变量值.

create a directory scss in src (not /src/styles/scss/ or any other variant). And there place your new variables value.

// /src/scss/variables.scss

$body-font-family: 'Less';
$heading-font-family: $body-font-family;

// Required for modifying core defaults
@import '~vuetify/src/styles/styles.sass';

这篇关于覆盖 Vuetify 2.0 sass 变量 $heading-font-family的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！