Flask renders css file as empty

Question

I've been working on a simple Flask app, and at some point decided to add custom CSS styling alongside Bootstrap. However, for some reason, this CSS file is rendered as empty file. Whether I open it with http://localhost:5000/static/style.css or inspect with Firebug, the result is the same. bootstrap.min.css is loaded but style.css is empty, although it's actually not empty.

Templates:

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

CSS folder path is app_root/static/css/style.css and app_root/static/css/lib/bootstrap.min.css

But as I already mentioned, the files are loaded.

Has anyone had any similar issues?

EDIT:

At first I thought it was a CSS problem so I did a lot of editing. This is what style.css currently looks like:

.navbar {
    background-color: #aaa;
}

p {
    font: Arial;
}

body {
    height: 100%;
}

What I mean by "the file being empty" is that once it's loaded, it's loaded empty. I still don't know why this is happening, but after playing with it for a while, I've noticed that it has something to do with the file name. For example, if I rename style.css to main.css and load that into html everything works fine.

As you can see, both files are loaded. style.css and bootstrap.min.css

enter image description here

Bootstraps content:

enter image description here

style.css content

enter image description here

After renaming style.css to main.css

enter image description here

Recursive directory structure:

project/static/css:
lib/  style.css

project/static/css/lib:
bootstrap-theme.css  bootstrap-theme.min.css  bootstrap.css  bootstrap.min.css

EDIT 2:

Also, I've managed to recreate this identical problem in a separate test project (in a different virtualenv) with a simple app.py module, static and template folders.

EDIT 3: Test app code:

from flask import Flask, render_template    

app = Flask(__name__)        

@app.route('/')
def index():
    return render_template('index.html')        

if __name__ == '__main__':
    app.run()

Folder structure is the same:

test/

./test:
app.py
static/
templates/

./test/static:
css/

./test/static/css:
lib/
main.css

./test/static/css/lib:
bootstrap.min.css

./test/templates:
index.html

And the app is started with:

python app.py

I think you need to give more information or share your code. What is the working URL for bootstrap.min.css? What do the logs say? — Steven Kryskalla
– Steven Kryskalla, Commented Sep 1, 2014 at 18:32
And what do you mean by "style.css is empty, although it's actually not empty". What does it contain then? Paste its contents in your question. — Steven Kryskalla
– Steven Kryskalla, Commented Sep 1, 2014 at 20:45
How do you initialize your flask app? How do you render your templates? Would you mind sharing the second application that produces the same results? — mehdix
– mehdix, Commented Sep 2, 2014 at 6:53

Marko Vrbanec · Accepted Answer · 2014-09-03 16:25:48Z

6

UPDATE: I was wrong about Flask serving empty CSS. Flask wasn't the problem, browser was. Browser was open for a long time and initially it cached css file as empty (because initially the file was empty).

It appears that simplest solution to this problem would be to turn off browser caching in any of the developer tools (Firebug in my case). Other solution would be to add HTTP headers to all the views, like this:

@auth.after_app_request
def after_request(response):
    response.headers['Cache-Control'] = 'no-cache, no-store, must-revalidate'
    response.headers['Pragma'] = 'no-cache'
    response.headers['Expires'] = '0'
    return response

Although the latter seems like a bad idea.

P.S. Excuse my noobishness.

answered Sep 3, 2014 at 16:25

Marko Vrbanec

1011 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Lovato · Accepted Answer · 2014-09-02 13:14:17Z

1

This may not answer your question directly, but perhaps can solve your problem at all. Working with Bootstrap should be simple, if you know the way to do it, otherwise, it can be quite confusing.

After dealing with this, I found a package named flask-bootstrap, which solved part of the problem. Then I wrote to myself (and made public) https://pypi.python.org/pypi/machete/, which is a tool to generate python code from templates.

In your case, you can try by entering an empty directory, and type:

$ machete -t bootstrap

The are other tools, like cookiecutter, but I didnt tried them yet.

This will create all the necessary files to make your code deployable on Pypi (if you want to), and will create all files with a runnable situation, just by typing:

$ python run.py

Then check the code. You can optionally do this just to understand how flask-bootstrap works (which is different from downloading bootstrap on bare hands, that looks like is your scenario). Or you can use this structure to code on.

This way, you can focus on coding, not solving installation problems.

answered Sep 2, 2014 at 13:14

Lovato

2,3201 gold badge18 silver badges23 bronze badges

1 Comment

Marko Vrbanec Over a year ago

Great advice! I'm aware of Flask-bootstrap extension, but still greedily decided to hand-code frontend part of the app while learning to code. Also, thank you for suggesting machete and cookiecutter. Those packages are new to me.

Collectives™ on Stack Overflow

Flask renders css file as empty

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related