The only reason for {{ url_for('static', filename='static/styles.css') }} to be the correct path to your file would be that your static_folder variable is actually set to your root folder path and not to your root folder path + static, which is weird unless you deliberately set it this way.

You could try to print the static_folder value to the console and see what it returns.

It seems like you are using Windows though, so there might be peculiarities that I am not aware of.

I have a simple form in an HTML file (which essentially is a jinja2 template). The form tag says <form action="login/" method="post"> which is where I handle the submission of the form.

This is the routing part of code

@app.route('/')
@app.route('/login/', methods=['GET', 'POST'])
def login():
    error = None

    if request.method == 'POST':
        if request.form['username'] != USERNAME or request.form['password'] != PWD:
            error = 'Those are not the correct credentials, are they? Please try again with something different'
        else:
            return flask.redirect(flask.url_for('homepage'))

    return render_template('login.html', error=error)

This is how I link to the CSS file in HTML template:

<link rel="stylesheet" type="text/css" href="static/style.css">

Required Behavior
When I go to 127.0.0.1:5000, it should just display the login page (which it does and it is able to find the CSS file at staticstyle.css)

When I enter correct details and hit submit, I should be at the 127.0.0.1:5000/homepage (which it does)

When I enter incorrect info on purpose, it should display the error message as specified.

Observed Behavior

When entering incorrect info on purpose, it does display the error message but the CSS file goes missing resulting in a 404: resource not found.

what have I tried already

I started off by looking at the network logs in chrome dev tools. I observed that when I simply load the page 127.0.0.1:5000 it simply loads the login page and the resource style.css seems to be getting loaded from 127.0.0.1:5000/static/style.css which I kinda understand ’cause the file is saved in staticstyle.css.

But as soon as I input info (incorrect details to trigger the error), the resource style.css results in a 404. It says that it expects that file to be somewhere at 127.0.0.1:5000/login/static/style.css which I don’t understand.

I do have a doubt that this is probably due to my action="login/" in the form element.

I then tried setting the static folder using app = Flask(__name__, static_folder='static') and that made no difference.

I’ve also tried doing this:

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

I’m seeking assistance on how do I make that 404 disappear. Moreover, all I want here is a simple login page (I can change the routings if required to achieve what I intend) which does not mess up the CSS file’s availability.

If you need additional information, please let me know.

Thank You for any help or suggestions 🙂