应用程序未获取 .css 文件（flask/python）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22259847/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Application not picking up .css file (flask/python)
提问by Zack
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
mainpage.html 看起来像这样
<html>
<head>
<link rel= "stylesheet" type= "text/css" href= "../styles/mainpage.css">
</head>
<body>
<!-- content -->
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.
虽然我的风格都没有被应用。它与 html 是我正在渲染的模板这一事实有关吗？蟒蛇看起来像这样。
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?
我知道这很有效，因为我仍然能够渲染模板。但是，当我尝试将样式代码从 html 的“head”标记内的“样式”块移动到外部文件时，所有样式都消失了，留下了一个裸露的 html 页面。有人看到我的文件结构有任何错误吗？
采纳答案by codegeek
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.
您需要有一个“静态”文件夹设置（用于 css/js 文件），除非您在 Flask 初始化期间专门覆盖它。我假设你没有覆盖它。
Your directory structure for css should be like:
你的 css 目录结构应该是这样的：
/app
- app_runner.py
/services
- app.py
/templates
- mainpage.html
/static
/styles
- mainpage.css
Notice that your /styles directory should be under /static
请注意，您的 /styles 目录应位于 /static 下
Then, do this
然后，这样做
<link rel= "stylesheet" type= "text/css" href= "{{ url_for('static',filename='styles/mainpage.css') }}">
Flask will now look for the css file under static/styles/mainpage.css
Flask 现在将在 static/styles/mainpage.css 下查找 css 文件
回答by nCore
I'm pretty sure it's similar to Laravel template, this is how I did mine.
我很确定它类似于 Laravel 模板，这就是我做的。
<link rel="stylesheet" href="/folder/stylesheets/stylesheet.css" />
Referred: CSS file pathing problem
参考： CSS 文件路径问题
回答by njzk2
In jinja2 templates (which flask uses), use
在 jinja2 模板（烧瓶使用的）中，使用
href="{{ url_for('static', filename='mainpage.css')}}"
The staticfiles are usually in the staticfolder, though, unless configured otherwise.
但是，除非另有配置，否则这些static文件通常位于static文件夹中。
回答by Ly-Bach
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:
我现在正在运行 1.0.2 版的烧瓶。上面的文件结构对我不起作用，但我找到了一个，如下所示：
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.)
（请注意，'static' 和 'templates' 是文件夹，它们的名称应该完全相同。）
To check what version of flask you are running, you should open Python in terminal and type the following accordingly:
要检查您正在运行的烧瓶版本，您应该在终端中打开 Python 并相应地键入以下内容：
import flask
flask --version
进口烧瓶
烧瓶 --version
回答by Stefano Tuveri
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.
我什至试图摆脱 conda 并使用 pip，升级到 python 3.7，我尝试了所有提出的编码，但没有一个修复。
And here is why (the problem):
这就是为什么（问题）：
by default python/flask search the static and the template in a folder structure like:
默认情况下，python/flask 在文件夹结构中搜索静态和模板，例如：
/Users/username/folder_one/folder_two/ProjectName/src/app_name/<static>
and
/Users/username/folder_one/folder_two/ProjectName/src/app_name/<template>
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
您可以使用 Pycharm（或其他任何东西）上的调试器自行验证并检查应用程序上的值（app = Flask( name)）并搜索 teamplate_folder 和 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.
路径 TEMPLATE_DIR 和 STATIC_DIR 取决于文件应用程序所在的位置。就我而言，请参见图片，它位于 src 下的文件夹中。
you can change the template and static folders as you wish and register on the app = Flask...
您可以根据需要更改模板和静态文件夹并在应用程序上注册= 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:
html 代码如下所示：
<link href="{{ url_for('static', filename='libraries/css/bootstrap.css') }}" rel="stylesheet" type="text/css" >
回答by Gopi P
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.
烧瓶项目结构不同。正如您所提到的，项目结构是相同的，但唯一的问题是样式文件夹。Styles 文件夹必须位于 static 文件夹中。
static/styles/style.css
回答by Christian Johansen
Still having problems after following the solution provided by codegeek: <link rel= "stylesheet" type= "text/css" href= "{{ url_for('static',filename='styles/mainpage.css') }}">?
按照codegeek提供的解决方案后仍然有问题：<link rel= "stylesheet" type= "text/css" href= "{{ url_for('static',filename='styles/mainpage.css') }}">？
In Google Chromepressing 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 + Rto ignore cached files and reload the static files.
在谷歌浏览器中按下重新加载按钮 (F5) 不会重新加载静态文件。如果您遵循了已接受的解决方案，但仍然没有看到您对 CSS 所做的更改，请按ctrl + shift + R忽略缓存文件并重新加载静态文件。
In Firefoxpressing the reload button appears to reload the static files.
在Firefox 中按下重新加载按钮似乎可以重新加载静态文件。
In Edgepressing the refresh button does not reload the static file. Pressing ctrl + shift + Ris supposed to ignore cached files and reload the static files. However this does not work on my computer.
在Edge 中，按下刷新按钮不会重新加载静态文件。按ctrl + shift + R应该忽略缓存文件并重新加载静态文件。但是这在我的电脑上不起作用。
回答by SW Jeong
One more point to add on to this thread.
还有一点要补充到这个线程。
If you add an underscore in your .css file name, then it wouldn't work.
如果您在 .css 文件名中添加下划线，则它不起作用。
