如何替换Vuetify的scss字体样式？

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

- Anthony Cheung

Answer 1

我发现了相同的问题，并最终找到了解决方案，它真的很容易...

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

- Martí