Hi @Caroline, I finally finished my app and deployed it, but the css isn’t rendering, even when referencing it correctly. How can I make CSS from a file render in a deployed app?
I am trying to render custom css in a deployed streamlit app. I have created a custom html table and am displaying it with components.html()
(API reference here).
The thing is, I can get this css to render locally when in development by putting my css file in streamlit’s static
folder on my computer and referencing it like so in my custom table html:
<link rel=“stylesheet” href=table_style.css” type=“text/css”/>
And it works just fine. I have finished my app and deployed it, changing the href to where the css file lives in my streamlit app’s repo:
<link rel=“stylesheet” href=assets/css/table_style.css” type=“text/css”/>
but no css was rendered. I also tried
main/assets/css/table_style.css
and then tried the full path
_user_/_repo_/main/assets/css/table_style.css
and using the raw link to the css file itself
https://raw.githubusercontent.com/_user_/_repo_/main/assets/css/table_style.css
yet the css doesn’t render when deployed with any of these attempts. There has to be a way to get this css referenced when in production… here is an example of someone with a very similar problem but not a very straightforward answer. I’ve tried every option I could think of in trying to get my custom css rendered when deployed but nothing seems to work. Help would be greatly appreciated, as I spent a lot of time working on and designing my app around this css, and it would basically be useless if it can’t be rendered in deployment (which I don’t know why it wouldn’t be able to). Thanks!