css - 覆盖 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 中的其他覆盖工作正常。我在这里做错了什么？

Answer 1

我已尝试了此处提供的所有解决方案，但没有任何效果。

接下来的工作是https://vuetifyjs.com/en/customization/sass-variables

在 src 中创建目录 scss(不是/src/styles/scss/或任何其他变体)。并在那里放置您的新变量值。

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