How to import a CSS in a scoped style with Marp?

Question

Using Marp, is there a way to import a scoped CSS theme without overwriting the global style?

For example, when I use this snippet overwrites the global style

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

Note: The content of custom-theme-scoped.css is

h2 {
  color: orange;
}

---

However, using the following snippet works correctly and overwrites only the current section

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

Answer 1

When using Marp, the scoped CSS style is designed to only apply to the current slide and its descendants. However, Marp doesn't support the direct import of an external CSS file into a scoped style tag without affecting the global styles.

If you want to import a scoped CSS theme without overwriting the global style, you can achieve it by manually copying the styles from the external CSS file into the scoped style tag. Here's an example:

---
<style scoped>
/* Manually copy the styles from custom-theme-scoped.css here */
h2 {
  color: orange;
}
</style>
# Section 1

By copying the styles into the scoped style tag, you ensure that they are only applied to the current slide and its descendants, without affecting the global styles.

Note: This approach requires manually maintaining the styles in both the external CSS file and the scoped style tag. If you make changes to the external CSS file, you'll need to update the scoped style tag accordingly.

Important Note: This answer is generated by Chat-GPT

You can also check this solution to apply some styles on scoped Support to apply inline style to current page