小编Wim*_*m T的帖子

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

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

Run Code Online (Sandbox Code Playgroud)

我的 .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;

Run Code Online (Sandbox Code Playgroud)

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

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

sass vue.js vuetify.js

8
推荐指数
2
解决办法
2万
查看次数

标签 统计

sass ×1

vue.js ×1

vuetify.js ×1