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

问题是由!important上的font-family引起的，用于检查排版帮助类。
我的解决方案是在我的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类，然后将这些类添加到{{1}中的CSS选择器中}文件（例如variables.scss）

Answer 2

在导入vuetify styles.sass之前，请尝试放置您要修改的变量。这应该可以解决此问题。

// main.scss

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

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

Answer 3

$headings: map-merge(map_get($headings, h1), ( h1: ( font-family: $title-font) ));

在文档v2.0中这样说，但对我不起作用

Answer 4

你好，过一会儿我将所有字体与以下字体协调起来。

// src/sass/main.scss
$my-font-family: "Raleway", sans-serif !default;


@import "~vuetify/src/styles/styles.sass";
$body-font-family: $my-font-family;

@import "~vuetify/src/styles/settings/variables";
$body-font-family: $my-font-family;

//Rewrite all the headings
$headings: map-merge($headings, (
        'h1': map-merge(
                        map-get($headings, 'h1'),
                        (
                                'font-family': $body-font-family
                        )
        ),
        'h2': map-merge(
                        map-get($headings, 'h2'),
                        (
                                'font-family': $body-font-family
                        )
        ),
        'h3': map-merge(
                        map-get($headings, 'h3'),
                        (
                                'font-family': $body-font-family
                        )
        ),
        'h4': map-merge(
                        map-get($headings, 'h4'),
                        (
                                'font-family': $body-font-family
                        )
        ),
        'h5': map-merge(
                        map-get($headings, 'h5'),
                        ( 'font-family': $body-font-family )
        ),
        'h6': map-merge(
                        map-get($headings, 'h6'),
                        ( 'font-family': $body-font-family )
        ),
        'subtitle-1': map-merge(
                        map-get($headings, 'subtitle-1'),
                        ( 'font-family': $body-font-family)
        ),
        'subtitle-2': map-merge(
                        map-get($headings, 'subtitle-2'),
                        ( 'font-family': $body-font-family)
        ),
        'body-2': map-merge(
                        map-get($headings, 'body-2'),
                        ( 'font-family': $body-font-family)
        ),
        'body-1': map-merge(
                        map-get($headings, 'body-1'),
                        ( 'font-family': $body-font-family)
        ),
        overline: map-merge(
                        map-get($headings, 'overline'),
                        ( 'font-family': $body-font-family)
        ),
        caption: map-merge(
                        map-get($headings, 'caption'),
                        ( 'font-family': $body-font-family)
        )
));

不要忘记在您的vue.config.js中添加main.scss https://vuetifyjs.com/en/customization/sass-variables

Answer 5

我对$ body-font-family有同样的问题；我正在尝试的是：

$body-font-family : 'ArbitrayFont' !important;
@import '~vuetify/src/styles/styles.sass';

但是，经过很多努力，我发现在更改默认的vuetify sass变量后，我应该将该变量分配给所需的元素，如下所示：

 $body-font-family : 'ArbitrayFont' !important;
 html,
body,
.v-application,
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: $body-font-family;
}

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

Answer 6

从Vuetify 2.0文档中，您应将默认变量放在初始样式导入语句上方

请注意：有时候，只有通过添加！important 才能起作用希望对您有帮助

// src/sass/main.scss

// Any changes to a default variable must be
// declared above the initial style import
$body-font-family: 'Source Sans Pro', cursive !important;

$heading-font-family: $body-font-family, cursive !important;

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

Answer 7

我已经尝试了这里介绍的所有解决方案，但没有任何效果。

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

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

7 个答案: