我想編輯 vuetify 3 的預設排版,它是在變數.scss 檔案中定義的,該檔案如下所示在套件本身內。
$typography: map-deep-merge( ( 'h1': ( 'size': 6rem, 'weight': 300, 'line-height': 6rem, 'letter-spacing': -.015625em, 'font-family': $heading-font-family, 'text-transform': none ), 'h2': ( 'size': 3.75rem, 'weight': 300, 'line-height': 3.75rem, 'letter-spacing': -.0083333333em, 'font-family': $heading-font-family, 'text-transform': none ), 'h3': ( 'size': 3rem, 'weight': 400, 'line-height': 3.125rem, 'letter-spacing': normal, 'font-family': $heading-font-family, 'text-transform': none ), 'h4': ( 'size': 2.125rem, 'weight': 400, 'line-height': 2.5rem, 'letter-spacing': .0073529412em, 'font-family': $heading-font-family, 'text-transform': none ), 'h5': ( 'size': 1.5rem, 'weight': 400, 'line-height': 2rem, 'letter-spacing': normal, 'font-family': $heading-font-family, 'text-transform': none ), 'h6': ( 'size': 1.25rem, 'weight': 500, 'line-height': 2rem, 'letter-spacing': .0125em, 'font-family': $heading-font-family, 'text-transform': none ), 'subtitle-1': ( 'size': 1rem, 'weight': normal, 'line-height': 1.75rem, 'letter-spacing': .009375em, 'font-family': $body-font-family, 'text-transform': none ), 'subtitle-2': ( 'size': .875rem, 'weight': 500, 'line-height': 1.375rem, 'letter-spacing': .0071428571em, 'font-family': $body-font-family, 'text-transform': none ), 'body-1': ( 'size': 1rem, 'weight': 400, 'line-height': 1.5rem, 'letter-spacing': .03125em, 'font-family': $body-font-family, 'text-transform': none ), 'body-2': ( 'size': .875rem, 'weight': 400, 'line-height': 1.25rem, 'letter-spacing': .0178571429em, 'font-family': $body-font-family, 'text-transform': none ), 'button': ( 'size': .875rem, 'weight': 500, 'line-height': 2.25rem, 'letter-spacing': .0892857143em, 'font-family': $body-font-family, 'text-transform': uppercase ), 'caption': ( 'size': .75rem, 'weight': 400, 'line-height': 1.25rem, 'letter-spacing': .0333333333em, 'font-family': $body-font-family, 'text-transform': none ), 'overline': ( 'size': .75rem, 'weight': 500, 'line-height': 2rem, 'letter-spacing': .1666666667em, 'font-family': $body-font-family, 'text-transform': uppercase ) ), $typography ); $flat-typography: () !default; @each $type, $values in $typography { $flat-typography: map-deep-merge( $flat-typography, (#{$type}: map.values($values)) ); }
我想要實現的是將 h1 大小更改為 32px,以便預設的 vuetify text-h1 類別會自動取得新的 32px 值。
我嘗試過重寫 vuetify 類別本身,例如(text-h1、text-h2 等...),但它不起作用,因為它們都有 !important 屬性
在底部等資源建立變數.scss。
並將其新增至 vuetify 外掛程式。