File paths in custom CSS

[m4ttr4ymond]

I only found out about MARP last week, and I'm already a huge fan! I would like to use it for my weekly research meetings, but my slides need to conform to my university's style guidelines. I've worked with SASS/CSS before, so I figured out most of it easily enough. However, I'm trying to figure out how to properly set an image background in SCSS (building off the Gaia theme) and I'm having some trouble with relative file paths. I was able to compile from SCSS to CSS fine, and I can use my custom theme with an image background. However, all image paths appear to work relative to the .md file that I'm editing, rather than relative to the location the theme CSS is saved in. How would I make it work relative to the theme? I would like to have a directory of themes and be able to edit slides in any other directory, but right now I need to edit all of my slides in the same directory. It may be possible that I'm just misunderstanding the usage of the @import url(...) directive in SCSS (and this is not a Marp-specific problem), as I've never needed to import images into SASS before.

P.S. I know we can use ![bg](), but I'd rather have it as part of the theme since I'm going to be making a slide deck at least once a week for the foreseeable future.

Any help is appreciated. Thank you!

[yhatt]

As Marp team's position, we don't recommend to use local image assets because Marp treats as that using local file has some potential security risks (e.g. Marp CLI requires manually setting --allow-local-files).

Workarounds have already discussed in the same issue marp-team/marp-vscode#181. You can take following either one:

• Use online assets through URL started with https://. For example, D&D your image to GitHub's textbox and use the uploaded image via background-image: url('https://user-images.githubusercontent.com/...');. (Disclaimer: It's not always retained for the future)

• Include assets as base64-encoded string into theme CSS, by converting images on build time. Marp Core has taken this way by postprocessing the built CSS by PostCSS and postcss-url, and community also has mentioned to this approach. Please note base64 encoding makes about 37% larger file size per a image and would make slower fetching theme CSS through online.

We think that should not make easy to use local assets even if it was inconvinient, because the classic Marp app had been targeted by maliciouses for steal local files.

[m4ttr4ymond]

Awesome, thanks! I'm busy right now, but I'll try out your suggestions tonight and see how it goes.

Edit: Thanks, that worked! Just a side note for anyone else who tries this in the future: The technique that @yhatt suggested works in general. However, there are certain links that refuse to act as a CDN (I assume because of server-side settings for HTTP responses), such as raw.githubusercontent.com, which I was trying to use for highlightJS. This gave me a lot of grief, but I eventually found a tool for creating a CDN permalink using GitHub repos: https://gitcdn.link/. I'd suggest only linking it to your own repo though just to be safe from unexpected rearrangements of the repo filetree :)