Application not picking up css file flask python

Question

I am rendering a template  that I am attempting to style with an external style sheet  File structure is as follows    app     - app runner py      services         - app py       templates         - mainpage html      styles         - mainpage css   mainpage html looks like this   lt html gt       lt head gt           lt link rel   stylesheet  type   text css  href      styles mainpage css  gt       lt  head gt       lt body gt           lt  -- content -- gt     None of my styles are being applied though  Does it have something to do with the fact that the html is a template I am rendering  The python looks like this   return render template  mainpage html   variables      I know this much is working  because I am still able to render the template  However  when I tried to move my styling code from a  style  block within the html s  head  tag to an external file  all the styling went away  leaving a bare html page  Anyone see any errors with my file structure

User · Answer

Still having problems after following the solution provided by codegeek:
<link rel= "stylesheet" type= "text/css" href= "{{ url_for('static',filename='styles/mainpage.css') }}"> ?

In Google Chrome pressing the reload button (F5) will not reload the static files. If you have followed the accepted solution but still don't see the changes you have made to CSS, then press ctrl + shift + R to ignore cached files and reload the static files.

In Firefox pressing the reload button appears to reload the static files.

In Edge pressing the refresh button does not reload the static file. Pressing ctrl + shift + R is supposed to ignore cached files and reload the static files. However this does not work on my computer.

User · Answer

I m running version 1 0 2 of flask right now  The above file structures did not work for me  but I found one that did  which are as follows        app folder  flask app py  static  style css  templates       index html    Please note that  static  and  templates  are folders  which should be named exactly the same thing    To check what version of flask you are running  you should open Python in terminal and type the following accordingly      import flask      flask --version

User · Answer

One more point to add Along with above upvoted answers  please make sure the below line is added to app py file   app   Flask   name    static folder  your path to static     Otherwise flask will not be able to detect static folder

User · Answer

In jinja2 templates  which flask uses   use  href     url for  static   filename  mainpage css        The static files are usually in the static folder  though  unless configured otherwise

User · Answer

If any of the above method is not working and you code is perfect then try hard refreshing by pressing Ctrl   F5  It will clear all the chaces and then reload file  It worked for me

User · Answer

One more point to add on to this thread    If you add an underscore in your  css file name  then it wouldn t work

User · Answer

I m pretty sure it s similar to Laravel template  this is how I did mine    lt link rel  stylesheet  href   folder stylesheets stylesheet css    gt    Referred  CSS file pathing problem  Simple flask application that reads its content from a  html file  External style sheet being blocked

User · Answer

I have read multiple threads and none of them fixed the issue that people are describing and I have experienced too   I have even tried to move away from conda and use pip  to upgrade to python 3 7  i have tried all coding proposed and none of them fixed    And here is why  the problem    by default python flask search the static and the template in a folder structure like     Users username folder one folder two ProjectName src app name  lt static gt   and   Users username folder one folder two ProjectName src app name  lt template gt    you can verify by yourself using the debugger on Pycharm  or anything else  and check the values on the app  app   Flask name   and search for teamplate folder and static folder  in order to fix this  you have to specify the values when creating the app something like this    TEMPLATE DIR   os path abspath     templates   STATIC DIR   os path abspath     static      app   Flask   name      to make the app run without any app   Flask   name    template folder TEMPLATE DIR  static folder STATIC DIR    the path TEMPLATE DIR and STATIC DIR depend on where the file app is located  in my case  see the picture  it was located within a folder under src   you can change the template and static folders as you wish and register on the app   Flask     In truth  I have started experiencing the problem when messing around with folder and at times worked at times not  this fixes the problem once and for all  the html code looks like this             lt link href     url for  static   filename  libraries css bootstrap css       rel  stylesheet  type  text css   gt     This the code  Here the structure of the folders

User · Answer

You need to have a  static  folder setup  for css js files  unless you specifically override it during Flask initialization  I am assuming you did not override it    Your directory structure for css should be like    app     - app runner py      services         - app py       templates         - mainpage html      static          styles             - mainpage css   Notice that your  styles directory should be under  static  Then  do this   lt link rel   stylesheet  type   text css  href      url for  static  filename  styles mainpage css       gt    Flask will now look for the css file under static styles mainpage css

User · Answer

The flask project structure is different  As you mentioned in question the project structure is the same but the only problem is wit the styles folder  Styles folder must come within the static folder   static styles style css

[python] Application not picking up .css file (flask/python)

Examples related to python

Examples related to html

Examples related to css

Examples related to templates

Examples related to flask