How do you "call" a css file from your marp header

[gauthiervasseur]

Greetings,

I can't the syntax to work to call a local CSS file from the marp header. Anyone has it?

[yhatt]

Marp's Markdown format does not provide a specific syntax to call a local CSS file in Markdown front matter.

Instead, Marp always uses a theme name to apply the theme CSS file.

---
theme: default
---

If you have a custom theme CSS in the local, tell the location of your theme CSS into Marp tool you are using. For example, Marp CLI can use either --theme or --theme-set option, and Marp for VS Code can set "Markdown: Marp > Themes" setting (markdown.marp.themes). When using the custom theme CSS, please confirm that the theme name has been defined in the content of CSS as the metadata /* @theme xxx */.

[gauthiervasseur]

Thank you, that is what I'm using right now. I pretty sure I made it work on a colleagues computer, using something like this:

[yhatt]

For just calling a CSS file, @import at-rule in the inline style is working, because Marp does not prevent CSS specific features. So your definition should actually achieve "call" a CSS file.

However, that is not recommended within the context of Marp because:

• The Marp converter does not resolve the content of imported styles through @import.
• So imported styles will not apply Marp-specific CSS preprocessing.
• This kind of styles might disturb applying style correctly, and might break the interface of Marp-integrated apps.

[gauthiervasseur]

Thank you so much. I'm trying to scale the distribution of styles across my team and tweaking VS code is not obvious for everyone!

[yhatt]

Related: marp-team/marpit#363

Marp team recommends to use @import carefully. It's no problem in Marp-specific usage (e.g. importing other theme) or known usage (e.g. Google Fonts, whose only @font-face definitions in the most case), but the other usage may met the some problem.

[gauthiervasseur]

Thank you!