Vuetify 2.6通过SCSS配置h1颜色时生成无效CSS的问题

现有一套可正常运行的Vuetify项目构建配置，支持通过variables.scss文件覆盖Vuetify默认样式，如下所示的$headings配置可正常合并生效：

$headings: (
        'h1': (
                'size': 40px,
                'line-height': 1.15em,
        ),
);

如果在该配置中为h1新增color属性，配置代码如下：

$headings: (
        'h1': (
                'color': red,
                'size': 40px,
                'line-height': 1.15em,
        ),
);

编译后会生成错乱的无效CSS，异常效果如下：

这是Vuetify本身的配置规则限制导致的。$headings是框架专门预留的字体排版配置项，内部编译逻辑只认固定的几个排版相关字段：size、line-height、weight、letter-spacing、font-family、text-transform，不会把自定义传入的非预设键直接拼成CSS属性。你塞进去的color不在支持字段列表里，会打乱框架遍历map拼接样式规则的逻辑，最后生成的CSS自然是错乱断裂的。

• 记住$headings只用来配置排版相关属性，别往里面塞颜色、边距、定位这类不相关的CSS属性，否则会触发编译异常
• 要修改h1颜色走常规样式覆盖即可，两种常用实现方式：
  1. 直接在全局样式中写选择器覆盖：

     // 写在variables.scss或者项目全局样式文件中均可
     .v-application h1 {
       color: red;
     }
     

  2. 借助Vuetify自带的主题配置系统定义颜色，之后通过text-*工具类或者组件的color属性调用，适合需要统一维护多套主题色的场景

内容的提问来源于stack exchange，提问作者Arthur