如何替换Vuetify字体样式？

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合并时，您将覆盖默认变量。