Flask Web App的CSS问题

Question

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

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

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

我和Flask有什么特别之处才能让它发挥作用？

我一直在尝试和改变事情大约半个小时,但似乎无法做到正确.

总结一下:你如何使用Flask进行CSS - 我是否必须拥有任何特殊的python代码？

Answer 1

你不应该对Flask做任何特别的事情来让CSS工作.也许你把style.css在flask_project/stylesheets/？除非正确配置,否则您的应用程序将不会提供此类目录.查看Flask Quickstart的Static Files部分,了解有关此内容的更多信息.但是,总而言之,这就是你想要做的:

1. 移动您需要的静态文件project_root/static/.我们假设你搬进来stylesheets/style.css了project_root/static/stylesheets/style.css.

2. 更改

   <link ... href="/stylesheets/style.css" />
   

   至

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

   这告诉模板解析器(Jinja2)告诉Flask在项目目录中找到配置的静态目录(默认情况下static/)并返回文件的路径.

   • 如果你真的想要,你可以设置路径为/static/stylesheets/style.css.但你真的不应该这样做 - 使用url_for允许你切换你的静态目录,仍然有一些工作,以及其他优点.

并且,正如@RachelSanders在她的回答中所说:

在生产环境中,您最好通过apache或nginx为静态文件提供服务,但这对dev来说已经足够了.

Answer 2

尝试使用重新加载 chrome

ctrl + shift + R

Answer 3

执行此操作的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文件夹"stylesheets"和文件"styles":

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

这应该正确地设置一切.祝好运!

Answer 4

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

http://flask.pocoo.org/docs/quickstart/#static-files

在生产环境中,您最好通过apache或nginx为静态文件提供服务,但这对dev来说已经足够了.