Search code examples
pythoncssflaskstaticuwsgi

Static folder has items in it, but opening the website with devtools on chrome, nothing is in the static folder/CSS sheet


I have a website hosted on an EC2 server with Flask and uwsgi, and I run it with docker. The problem is that the CSS file that I see in DevTools is empty(css file empty in the website, but the file has code when i check it on my computer), but when I open the CSS file on my computer, the file has code in it. I've uploaded the code to GitHub here. I can insert CSS code(copy and paste) into the empty file I see in DevTools and it updates the website, so I don't think it can be the linking.

EDIT: I changed the code to proper formatting for the url_for, it didnt help, the static folder is still empty(i see the images, js, css in my editor but not with devtools and it doesnt show on my website)


Solution

  • This is because your css file is not properly connected to the html file.

    In your index.html file, You have did something like this:

    <link rel="stylesheet" href="{{url_for('static',filename='../static/styles.css')}}">
    

    Well, it's a wrong format to do so. You must do it like this:

    <link rel="stylesheet" href="{{url_for('static',filename='/styles.css')}}">
    

    You don't need to write the ../static/ path because it's already done in url_for('static'. I hope you understood