I’m writing a site for Flask and faced the problem that the css-file does not connect to the project
This is HTML-file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css'>
<link type="text/css" href="{{url_for('static', filename='css/main.css')}}" rel="stylesheet" />
This is CSS-file:
body {
background: red;
}
But the color never appeared on the site
>Solution :
What you should do is, if your static file is in templates file remove it from templates and do that:
from flask import Flask, render_template
css_file = "static/styles/style.css"
app = Flask(__name__)
@app.route("/")
def home():
return render_template("index.html", css_link = css_file)
then in your head tag you add:
<link rel="stylesheet" href="{{css_link}}" type="text/css"/>
Don’t forget to add a body tag!