Quarto自定义SCSS主题部分属性被Bootstrap覆盖问题排查

问题原因 #

Quarto的SCSS主题有固定加载顺序：/*-- scss:defaults --*/块的代码会先于Bootstrap核心样式注入。而Bootstrap对h2,.h2明确设置了opacity: .9和border-bottom: 1px solid #dee2e6属性，当CSS选择器优先级相同时，后加载的样式会覆盖先加载的，所以你自定义的这两个属性被Bootstrap默认规则盖过去了。

至于font-style: italic能生效，是因为Bootstrap默认没给h2设置这个属性，不存在覆盖冲突。

解决方案 #

方法1：用scss:rules块（推荐） #

Quarto专门提供了/*-- scss:rules --*/块，它的代码会在Bootstrap样式之后加载，优先级更高，直接就能覆盖默认样式。修改你的custom.scss：

/*-- scss:rules --*/

h2, .h2 {
    font-style: italic;
    opacity: 1;
    border-bottom: 6px solid red;
    padding-bottom: 0.15rem;
}

方法2：提升选择器优先级 #

如果一定要用scss:defaults块，可以给选择器增加层级来提高优先级，比如加上body前缀，权重比Bootstrap的基础选择器更高：

/*-- scss:defaults --*/

body h2, body .h2 {
    font-style: italic;
    opacity: 1;
    border-bottom: 6px solid red;
    padding-bottom: 0.15rem;
}

效果验证 #

修改后重新渲染文档，h2的红色粗下划线和完全不透明的效果就能正常显示，不会再被Bootstrap样式覆盖。

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