Flask style.css 未从 static/css/style.css 加载答案

【问题标题】：Flask style.css not loading from static/css/style.cssFlask style.css 未从 static/css/style.css 加载
【发布时间】：2017-07-01 10:19:29
【问题描述】：

这是我的 python/flask 应用程序的目录结构。

application
templates/
static/css/style.css
static/js/appjs.js

在我的“头脑”中，我添加了这个。

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

JS 文件工作正常，但 style.css 不工作。但是 style.css 可以通过 url 访问，也可以在页面源视图中访问

http://localhost:5000/static/css/style.css

【问题讨论】：

标签： python css flask jinja2

【解决方案1】：

在我阅读了您的帖子后，遇到了同样的错误并以非常有趣的方式解决了它。我启动了我的应用程序并通过在浏览器中右键单击我的 Flask 网站开始研究。几秒钟后，CSS 莫名其妙地拿起了。（缓存？！？！）

希望对你有帮助

【讨论】：

我遇到了同样的问题，令人惊讶的是，这是要走的路。似乎烧瓶不会立即了解您对style.css 所做的更改。我尝试了一切，停止n重新启动服务器，关闭应用程序，评论和取消评论链接。但是，我刚刚清除了浏览器缓存，它会立即获取更改。
Firefox 用户：Ctrl + Shift + R 重新加载页面并清除缓存，有效地重新加载样式表。

【解决方案2】：

清除浏览器缓存可立即解决此问题

在谷歌浏览器上：

转到右上角的三个点
进入设置
点击“隐私和安全”
点击“清除浏览历史记录”
选中标记为“缓存的图像和文件”的复选框并取消选中“浏览历史记录”和“Cookie 和其他网站数据”
重新加载您的页面（确保您的服务器正在运行）
您的 CSS 现在应该可以正常显示了

在其他浏览器上执行类似步骤也应该可以解决此问题。

但是，对于您在 CSS 文件中进行的每一项新更改，您都必须重复这些相同的步骤以清除浏览器缓存

【讨论】：

这是一个被低估的解决方案，我已经尝试解决这个问题好几天了。非常感谢！

【解决方案3】：

HTML 并不完全是 XML，有时事情也不那么整洁。您正在使用自动关闭标签 - 不要。尝试删除终止/：

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

许多浏览器都非常宽容，可以很好地解析<link … ></link> 或<link … />，但不能保证。标准格式为without。

或者，您应该确认问题是在加载 CSS 文件，还是您的 CSS 文档的实际内容。

【讨论】：

感谢您的回答，删除 / 对输出没有任何影响
@imdrupal 什么 HTML 在浏览器中呈现？如果您查看页面源代码，您可以打开您的 CSS 文件吗？也许您的 CSS 文件一直在加载，但 CSS 本身并没有按预期运行。
是的，我可以在页面源代码视图中看到我的 css，也可以在浏览器中打开，但 CSS 本身的行为不符合预期（如您所说）
@imdrupal 在这种情况下，这并不是真正的 python 问题，而是 CSS 问题。我建议您查看 CSS 本身，并在您的示例 CSS、HTML 以及预期行为与观察到的行为中发布一个新问题。
你不是必须先将静态加载到模板中吗？也许你忘了它？只是从我的脑海中冒出一些想法。 Django 会给你错误/警告，我不确定 Flask 到底如何。

【解决方案4】：

在 Flask Bootstrap 中，要添加自定义 CSS，您必须在块样式中调用 super 函数。

 {% extends "bootstrap/base.html" %}
 {% block styles %}
 {{super()}}
  <link rel="stylesheet"
  href="{{url_for('static', filename='css/style.css')}}">
 {% endblock %}

您可以在docs 上阅读更多信息

【讨论】：

{{super()}} 完成了这项工作！谢谢！

【解决方案5】：

正如obinna 所说，出于某种原因，您需要根据原始docs 引用包含带有{{super()}} 的引导css 的基本模板中的特定块。这是最终的解决方案：

在你的base.html:

{% block styles %}
<link rel="stylesheet" href="<bootstrap-resource-url>">
{% endblock %}

（将<bootstrap-resource-url>更改为指向bootstrap.css文件的真实网址）

然后在你的任何content.html：

{% extends "base.html"%}
{% block styles %}
{{super()}}
<link rel="stylesheet" href="{{url_for('static', filename='css/main.css')}}">
{% endblock %}

如果您只打算使用没有任何子模板的 base，它应该可以在不引用特定块的情况下工作。

【讨论】：

【解决方案6】：

你也可以试试这个：

<link rel="stylesheet" type="text/css" href="{{ url_for('.static', filename='vendor/fontawesome-free/css/all.min.css') }}">

不是'静态'，使用'.static'

【讨论】：

【解决方案7】：

您可以将一种配置添加到您的烧瓶应用程序中：

app.config['SESSION_COOKIE_SECURE'] = False

希望它有效。

【讨论】：

不幸的是它没有:-(

【解决方案8】：

清除缓存或在您的网页上使用 ctrl + f5 并重新加载。我也遇到了同样的问题，就这样解决了！

【讨论】：