Flask app not loading any css file from my project

Question

I recently started learning Flask and everythings went well until one point.

So, my project is structured this way:

FlaskApp Folder, which contains : Templates(a folder which contains: index.html , layout.html and styles(folder) and javascript(also folder) and application.py.

I included my css in the layout.html (layout.css and bootstrap.css) after the title tag like this:"

<link rel="stylesheet" type="text/css" href="styles/layout.css">
<link rel="stylesheet" type="text/css" href="styles/bootstrap.css">

And at the bottom, before the i added the javascript file of the bootstrap:

<script src="javascript/boostrap.js"></script>

After all of this, i added some html into the index.html from the bootstrap documentation page, such as alert messages...

And there is no CSS applied.(I mention that i've restarted the Flask App).

PS: i added a:

 body{ background-color: red; }

to the layout.css and it's still not working.

Thank you very much !

Rahul Bharadwaj · Accepted Answer · 2019-12-27 16:43:05Z

2

This is strictly for development only.

So, you need to have two directories under your app, those are: static and templates. The *.html files are usually palced under templates and *.js and *.css files are placed under static.

So your app structure might be something like:

app
├── app.py
├── static
│   ├── base.css
│   ├── base.js
│   └── index
│       ├── index.css
│       └── index.js
└── templates
    └── index.html

Now, lets move onto how to link these.

In your HTML file, replace the current <link> and <script> tags with something like this:

For CSS:

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

For JS:

<script src= {{ url_for("static",filename="index/index.js") }} ></script>

And finally, ensure your python's route returns the appropriate html page. Simplest is to use render_template function.

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

answered Dec 27, 2019 at 16:43

Rahul Bharadwaj

2,8242 gold badges20 silver badges30 bronze badges

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

1 Comment

Rahul Bharadwaj Over a year ago

Okay, could you please mark the answer as solved then.

Collectives™ on Stack Overflow

Flask app not loading any css file from my project

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related