How to import .css file from node module into my custom .css file?

[martinswan]

I have a custom stylesheet, say custom-style.css, that I have listed in my observablehq.config.ts file. I want to import css from another file that is from a node module that I saved in my project here: node_modules/notosans-fontface/css/notosans-fontface-allweight.css.

How can import this stylesheet into my custom stylesheet? So far my various incantations of importing that file path have not worked. Thanks!

[CAYdenberg]

I tried this, and it looks to me like Observable can't (yet) handle serving font files as static assets. It correctly resolves all the paths, but it doesn't yet know what to do with the actual font files (eot and woff).

Best bet for now is to get the font from a CDN.

[CAYdenberg]

Found an existing issue: #786

[martinswan]

Thanks for your responses. Sounds like you got further than I did – I'm getting the following error when adding @import "node_modules/notosans-fontface/css/notosans-fontface-allweight.css"; or similar to my custom stylesheet file: [ERROR] Could not resolve "node_modules/notosans-fontface/css/notosans-fontface-allweight.css"

It sounds like I'll hit that same issue if I can get past this error, but I am still curious what the correct syntax is for importing this file. Thanks!

[CAYdenberg]

Well, it all depends on where your style.css is located, but in my case, it was like this:

# in /docs/index.md
style: ./style.css

/* in /docs/style.css */
@import url('../node_modules/notosans-fontface/css/notosans-fontface-allweight.css");

Notice paths are relative.

There are some rules about URL paths that are worth knowing if that's what you're asking, but keep in mind that it's a bit of facade, since esbuild is really the thing doing the resolving (not your browser). So all I can say for sure is that my way worked :)

[martinswan]

Thanks. Confirming that the paths are relative and that they need to be wrapped in the url() function helps my understanding a bit.

As for the underlying issue of not serving font files as static assets, I'll use your suggested work-around of getting them from a CDN for now. Thanks again!