Where do I have to copy the file style.css when deploying with flask?

Question

I am not able to load the style.css for the index with flask, I have tried everything, but it does not correctly read the file style.css.

The structure goes as follows:

my_folder/app.py

my_folder/templates/index.html

my_folder/static/css/style.css

my_folder/static/scss/style.scss

my_folder/static/img/logo.png

Code from the file index.html:

<head>
  <meta charset="UTF-8">
  <title>Responsive Table</title>
  <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script>


  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

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

 
</head>

Code from app.py:

import numpy as np
from flask import Flask, request, render_template
import pickle
import pandas as pd
import os

app = Flask(__name__)

model_logreg = pickle.load(open('Models/logreg.pkl', 'rb'))

PICTURE_FOLDER = os.path.join('static', 'img')
app.config['UPLOAD_FOLDER'] = PICTURE_FOLDER
full_filename = os.path.join(app.config['UPLOAD_FOLDER'], 'logo.png')

@app.route('/')
def home():
    
    return render_template('index.html', value1 = 1, value2 = 1, value3 = 1, value4 = 1, value5 = 1, value6 = 1, user_image = full_filename)

@app.route('/predict',methods=['POST'])
def predict():

    int_features = [str(x) for x in request.form.values()]
    final_features = np.array(int_features)    
     
... bla bla bla ...
 
    
if __name__ == "__main__":
    app.run(host='0.0.0.0',port=8080)

Extra info: the file style.css is completely right because I copy-pasted the code in index.html and works fine. So it is just a path-finding problem.

Thanks everyone.

score 1 · Accepted Answer · answered Nov 04 '20 at 00:11

1

Replace this line:

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

by this:

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

answered Nov 04 '20 at 00:11

IoaTzimas

10,538
2
13
30

it kind of finds something but looks horrible, like everything black except the characters – Miguel Gonzalez Nov 04 '20 at 00:20
Does it find the file? If yes, then the problem is in the file, check the syntax inside the css file – IoaTzimas Nov 04 '20 at 00:22
the syntax is fine, I can just copy-paste it in the index.htm between and works fine – Miguel Gonzalez Nov 04 '20 at 00:25
Does flask find the css file? You can easily check it by testing a couple of changes – IoaTzimas Nov 04 '20 at 00:26
yes the problem might be in flask, what do you mean by testing a couple of changes? – Miguel Gonzalez Nov 04 '20 at 00:32
Have you confirmed that flask finds the css file? I mean that you can easy know that, if you make some changes in css and check if they are applied in your page – IoaTzimas Nov 04 '20 at 00:33
I am not sure how can I confirm that – Miguel Gonzalez Nov 04 '20 at 00:38
1

I solved it in an unexpected way: cleaning my browsing data. It was a browser problem. It would not have worked without your line anyway. So you got my vote. Thanks – Miguel Gonzalez Nov 04 '20 at 00:47

Where do I have to copy the file style.css when deploying with flask?

1 Answers1