Question

在src / scss / variables.scss中

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

 $headings: (
      'h1': (
      'size': 36px,
      'line-height': 36px,
    ),
     'h2': (
    'size': 24px,
    'line-height': 24px
  ),
  'h3': (
    'size': 1.5625rem,
    'line-height': 1.4em
  ),
  'h4': (
    'size': 1.125rem,
    'line-height': 1.4em
  ),
  'h5': (
    'size': 1.0625rem
  ),
  'h6': (
    'size': .75rem
  ),
  'subtitle-2': (
    'size': 1rem
  ),
  'overline': (
    'letter-spacing': 0
  )
);

最终结果：

.v-application .display-4 {
    font-size: 36px !important;
    font-weight: 300;
    line-height: 36px;
    letter-spacing: -.015625em !important;
    font-family: "Lora", serif !important;
}

但是我没有替换变量，而是合并了基本变量中的定义。这是因为它正在使用深度合并，并且在我定义样式后就合并了吗？

in vuetify/src/style/settings/_variables.scss
$headings: map-deep-merge(
  (
    'h1': (
      'size': 6rem,
      'weight': 300,
      'line-height': 6rem,
      'letter-spacing': -.015625em,
      'font-family': $heading-font-family

Answer 1

我发现了同样的问题，最后找到了解决方案，这真的很容易...

您只需要在文件底部导入styles.sass。这样，您将覆盖默认变量，而Vuetify会将自定义变量与默认映射$ headings合并。

如何替换Vuetify scss字体样式？

1 个答案: