🏠 back to Observable

How to load and use a local CSS file?

I’ve seen this post on how to use html to link to a CSS file: How to load CSS files?

What I’d like to know is how to load a local file and use it as the CSS file for the notebook. I tried using the File attachments like so:

<html<link href=" + FileAttachment(“style.css”).url +`" rel=“stylesheet” />

but it didn’t seem like the code was being recognized.

I think you have to replace FileAttachment(“style.css”).url with await FileAttachment(“style.css”).url() , because the url function returns a Promise.

So, using the html template literal, it would be something like:

html`<link href="${await FileAttachment('style.css').url()}" rel="stylesheet" />`

edit: as stated in the comment below, the solution is:

html`<link type="text/css" href="${await FileAttachment('style.css').url()}" rel="stylesheet" />`

Thanks for your response! This works so long as one includes the type=“text/css” component, as follows:

stylesheet = html`<link type="text/css" href="${await FileAttachment("style.css").url()}" rel="stylesheet" />`
1 Like