python - Flask Web 应用程序的 CSS 问题

Question

我无法让 CSS 正确输出 - 我的网页都没有样式。

这是我所有模板中的链接。我究竟做错了什么？

<link type="text/css" rel="stylesheet" href="/stylesheets/style.css"/>

Flask 有什么特别的地方可以让它工作吗？

我已经尝试和改变了大约半个小时，但似乎无法做到正确。

总结一下：你如何用 Flask 做 CSS - 我必须有任何特殊的 python 代码吗？

score 93 · Accepted Answer

你不需要对 Flask 做任何特别的事情来让 CSS 工作。也许你正在style.css投入flask_project/stylesheets/？除非正确配置，否则您的应用程序不会提供此类目录。查看Flask 快速入门的静态文件部分了解更多信息。但是，总而言之，这就是您想要做的：

移动您需要的静态文件project_root/static/。假设您搬进stylesheets/style.css了project_root/static/stylesheets/style.css.
改变
```
<link ... href="/stylesheets/style.css" />
```
至
```
<link ... href="{{ url_for('static', filename='stylesheets/style.css') }}" />
```
这告诉模板解析器（Jinja2）告诉 Flask 在你的项目目录中找到配置的静态目录（默认情况下，static/）并返回文件的路径。
- 如果你真的想要，你可以将路径设置为/static/stylesheets/style.css. 但是你真的不应该那样做 - usingurl_for允许你切换你的静态目录并且仍然有工作，以及其他优点。

而且，正如@RachelSanders 在她的回答中所说：

在生产环境中，您最好通过 apache 或 nginx 提供静态文件，但这对开发人员来说已经足够了。

score 62 · Accepted Answer

62

尝试使用重新加载 chrome

ctrl + shift + R

于 2019-12-14T04:22:44.653 回答

score 19 · Accepted Answer

执行此操作的 4 个步骤（在此处建立了很多其他答案，假设您已正确设置 Flask）：

1）在您的文件夹中创建一个静态文件app夹：[root_folder]/app/static/

2) 将所有静态内容（图像、JavaScript、CSS 等）移动到这些文件夹中。将内容保存在各自的文件夹中（不是强制性的，只是更整洁、更有条理）。

3）修改__init__.py文件app夹中的文件以具有此行：

app.static_folder = 'static'

这将允许您的应用程序识别您的static文件夹并相应地读取它。

4) 在您的 HTML 中，设置您的文件链接，如下所示：

<link ... href="{{ url_for('static', filename='[css_folder]/[css-file].css') }}" />

例如，如果您将 CSS 文件夹称为“样式表”并将文件称为“样式”：

<link ... href="{{ url_for('static', filename='stylesheets/styles.css') }}" />

那应该正确设置所有内容。祝你好运！

score 9 · Accepted Answer

您需要在 Flask 应用程序中创建一个名为“static”的文件夹，然后将所有 CSS 文件放在那里。

在生产环境中，您最好通过 apache 或 nginx 提供静态文件，但这对开发人员来说已经足够了。

score 3 · Accepted Answer

3

就我而言 - macOS 10.13 上的 safari - 清除缓存就可以了。

于 2018-04-03T08:44:49.923 回答

score 3 · Accepted Answer

ctrl + shift + R 技巧有效，尤其是在第一次运行期间加载 css 时（这意味着所有路径都很好）；但是，如果对 css 进行了更改，则无法重新加载。

score 2 · Accepted Answer

2

使用（mac OS）简单地硬刷新：

command + shift + R

于 2020-07-27T21:11:14.213 回答

score 2 · Accepted Answer

尝试在浏览器中进行硬刷新。您可能正在查看缓存版本。在Firefox中按住CTRL并按F5。

score 2 · Accepted Answer

我创建了静态文件夹，将我的 CSS 放入其中并正确链接它，但它不起作用。我清除了浏览器的缓存，它工作。或者，您可以通过在 chrome 上按Ctrl+来硬刷新浏览器。F5

score 1 · Accepted Answer

“如果您更改静态文件，请刷新浏览器页面。如果更改未显示，请尝试清除浏览器的缓存。” -Flask 文档

score 0 · Accepted Answer

处理程序的顺序可能会导致问题：

将工作而不是

11 回答 11