为什么Flask加载不存在的CSS styles？

Question

I am trying to make my first website. I am using Flask with HTML, CSS and Bootstrap. Once I am happy with the front-end I am planning to host it on a 2010 iMac running something like Ubuntu Server and Apache or Nginx.

The current issue that I am having is that, since I moved the project folder to a different directory, the design of the page does not match css stylesheet. At first I wasn't sure if it was my poor CSS skills or the computer, to test I added dramatic changes such as:

* {
color: red;
}

Nothing changed when I did this the other day, but when I opened the project today the above style was applied even though it no longer exists in the stylesheet. In fact nothing in the stylesheet is set to red. Because none of the changes that I was making to style.css were being applied I recently I removed the stylesheet from /static , however styles are still being applied to the page (including all the font being the color red). Why is this?

Possible causes: The program seems to be searching for the stylesheet in /templates : <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='style.css') }}"> I discovered this by control+click on {{ url_for('static', filename='style.css') }} to try and go to the location of the file VSCode gives me this error

Unable to read file `'/project/templates/{{ url_for('static', filename='style.css') }}` Unable to resolve non-existing file.`

The above error occurs regardless of whether style.css is in /static or not.

In application.py I have tried to rectify this:

app = Flask(__name__,
            static_folder='/static')

Also I have read on other posts that it is considered better practice to load the stylesheet from the Apache/Nginx. Could anyone explain why this is or link me to a resource that explains this in lanugage understandable to a beginner?

Thanks in advance,

Answer 1

Basic answer is you have to set static_url_path here app = Flask(__name__, static_url_path="/STATIC_FOLDER", static_folder='STATIC_FOLDER')

About nginx : you don't need nginx for local development, it is used in deployment step when you or some devops link specific domain name with your apps

Answer 2

shift + f5 clears the cache for CSS styling on some browsers. This is opposed to just refreshing the page.