css - 覆盖 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;
我的 .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 中的其他覆盖工作正常。我在这里做错了什么?
解决方案
我已经尝试了这里提供的所有解决方案,但没有任何效果。
遵循此https://vuetifyjs.com/en/customization/sass-variables的工作是什么
scss
在src
(不是 /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';
推荐阅读
- c# - 如何在 C# 应用程序中解密 smime 文件?
- components - 如何在 VSCODE 中使用 Textmate 更改 JSX 组件标签的语法突出显示?
- android - android studio - 如何根据文本调整按钮的大小?
- node.js - 如何构建动态 MongoDB 查询
- ios - Cordova - 使用多个目标配置文件更新 exportOptions plist 以创建 ipa
- javascript - 迭代 Swagger YAML 文件以动态生成属性列表
- docusignapi - 一小时后Docusign API失败
- microsoft-graph-api - Microsoft Graph API 为同一邮件返回了不同的 threadID
- android - 从 DB 文件创建 Android Room 实体类
- javascript - 如何在不调用/创建侦听器函数的情况下增加 let 变量