Question

这是我的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

Answer 1

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

在Google Chrome浏览器上：

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

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

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

Answer 2

HTML并不是非常简单的XML，有时事情并不是那么简洁。您正在使用自动关闭标记 - 不要。请尝试删除终止/：

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

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

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

Answer 3

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

我希望这对您有帮助

Answer 4

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

＆＃13;

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

＆＃13;

您可以在docs

上阅读更多内容

Answer 5

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

在您的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，则它应该在不引用任何特定块的情况下工作。

Answer 6

您可以将以下配置添加到烧瓶应用程序：

app.config['SESSION_COOKIE_SECURE'] = False

希望它能起作用。

Answer 7

清除缓存，或仅在网页上使用ctrl + f5并重新加载。我也面临同样的问题，并以这种方式解决了！

Flask style.css没有从static / css / style.css加载

7 个答案: