如何在Marp的scoped样式中导入CSS且不覆盖全局样式？

问题场景 #

当在Marp幻灯片里用<style scoped>导入外部CSS文件时，外部CSS规则会意外覆盖全局样式，示例如下：

幻灯片代码：

---
<style scoped>
@import url('custom-theme-scoped.css');
</style>
# Section 1
---

外部文件custom-theme-scoped.css内容：

h2 {
  color: orange;
}

但如果直接把CSS规则写在<style scoped>块内，规则就只会作用于当前幻灯片，不会影响全局：

---
<style scoped>
h2 {
  color: orange;
}
</style>
# Section 1
---

问题原因 #

核心原因是CSS的@import规则会忽略<style scoped>的作用范围限制。@import在样式解析的早期阶段就会执行，它会把外部CSS内容直接插入当前样式块，但渲染引擎不会为导入的规则自动添加scoped所需的局部作用域标识（比如动态生成的元素属性选择器），导致这些规则变成全局生效。

解决方案 #

方法一：用局部类名包裹内容限定作用域 #

1. 修改幻灯片代码，给当前幻灯片内容套一个唯一类名，在scoped样式里导入外部CSS：

---
<style scoped>
  .local-slide {
    @import url('custom-theme-scoped.css');
  }
</style>
<div class="local-slide">
# Section 1
<!-- 其他幻灯片内容 -->
</div>
---

2. 确保外部CSS的所有规则都仅针对这个类名内部的元素（如果支持CSS嵌套，也可以在外部文件里写成.local-slide h2 { ... }）。

方法二：直接内联CSS规则 #

最稳妥的方式就是像验证过的那样，把外部CSS内容直接复制到<style scoped>块中，所有规则会被自动添加局部作用域标识，仅作用于当前幻灯片。

方法三：用CSS变量适配主题场景 #

如果外部CSS是用于定义主题样式，可以把样式转为CSS变量，导入后仅在当前幻灯片元素上应用：

1. 修改custom-theme-scoped.css内容：

:root {
  --h2-color: orange;
}

2. 幻灯片代码：

---
<style scoped>
@import url('custom-theme-scoped.css');
h2 {
  color: var(--h2-color);
}
</style>
# Section 1
---

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