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/中？除非正确配置，否则您的应用程序将不会提供此类目录。查看Static Files的Flask Quickstart部分，了解有关此问题的更多信息。但是，总而言之，这就是你想要做的事情：

将您需要的静态文件移至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。但你真的不应该这样做 - 使用url_for可以让你切换你的静态目录，但仍然可以使用其他优点。

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

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

Answer 2

执行此操作的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 3

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

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

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

Answer 4

在我的情况下 - 在macOS 10.13上进行safari - 清除缓存就行了。

Answer 5

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

Answer 6

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

Answer 7

尝试使用

重新加载Chrome

Ctrl + Shift + R

Answer 8

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

Answer 9

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

url：/ stylesheets static_dir：stylesheets
url：/。* 脚本：helloworld.application

将取代

url：/。* 脚本：helloworld.application
url：/ stylesheets static_dir：stylesheets

Answer 10

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

Answer 11

使用（mac OS）进行简单的硬刷新：

2020-07-06 13:13:44.670 ? I/bt_btif: bta_sys_event: Event 0x1f00
2020-07-06 13:13:44.671 ? I/bt_stack: [INFO:gatt_api.cc(1122)] GATT_Connectgatt_if=10 06:05:04:50:d0:84
2020-07-06 13:13:44.671 ? I/bt_btm: BTM_BleUpdateBgConnDev() add=1
2020-07-06 13:13:44.671 ? I/bt_btm: btm_ble_start_auto_conn start=0
2020-07-06 13:13:44.671 ? D/bt_btm: conn_st = 0, not in auto conn state, cannot stop
2020-07-06 13:13:44.671 ? I/bt_btm: btm_ble_start_auto_conn start=1
2020-07-06 13:13:44.822 ? I/vendor.qti.bluetooth@1.0-ibs_handler: ProcessIbsCmd: Received IBS_WAKE_IND: 0xFD
2020-07-06 13:13:44.823 ? I/vendor.qti.bluetooth@1.0-ibs_handler: ProcessIbsCmd: Writing IBS_WAKE_ACK
2020-07-06 13:13:44.873 ? I/vendor.qti.bluetooth@1.0-ibs_handler: ProcessIbsCmd: Received IBS_SLEEP_IND: 0xFE
2020-07-06 13:13:45.566 ? I/vendor.qti.bluetooth@1.0-ibs_handler: ProcessIbsCmd: Received IBS_WAKE_IND: 0xFD
2020-07-06 13:13:45.566 ? I/vendor.qti.bluetooth@1.0-ibs_handler: ProcessIbsCmd: Writing IBS_WAKE_ACK
2020-07-06 13:13:45.607 ? I/vendor.qti.bluetooth@1.0-ibs_handler: ProcessIbsCmd: Received IBS_SLEEP_IND: 0xFE
2020-07-06 13:13:45.834 ? I/vendor.qti.bluetooth@1.0-ibs_handler: DeviceSleep: TX Awake, Sending SLEEP_IND
2020-07-06 13:13:45.834 ? D/vendor.qti.bluetooth@1.0-ibs_handler: SerialClockVote: vote for UART CLK OFF
2020-07-06 13:13:45.985 ? D/vendor.qti.bluetooth@1.0-wake_lock: Release wakelock is released 
2020-07-06 13:13:46.103 ? V/ActivityManager: Broadcast sticky: Intent { act=android.intent.action.SIG_STR flg=0x10 (has extras) } ordered=false userid=-1 from pid=2635 uid=1001
2020-07-06 13:13:47.144 ? I/vendor.qti.bluetooth@1.0-ibs_handler: ProcessIbsCmd: Received IBS_WAKE_IND: 0xFD
2020-07-06 13:13:47.144 ? D/vendor.qti.bluetooth@1.0-ibs_handler: SerialClockVote: vote for UART CLK ON
2020-07-06 13:13:47.148 ? D/vendor.qti.bluetooth@1.0-wake_lock: Acquire wakelock is acquired 
2020-07-06 13:13:47.148 ? I/vendor.qti.bluetooth@1.0-ibs_handler: ProcessIbsCmd: Writing IBS_WAKE_ACK
2020-07-06 13:13:47.152 ? I/bt_hci: BLE HCI(id=62) event = 0x0a)
2020-07-06 13:13:47.152 ? I/bt_btm: btm_identity_addr_to_random_pseudo
2020-07-06 13:13:47.152 ? I/bt_btm: btm_ble_connected
2020-07-06 13:13:47.152 ? D/bt_btm: btm_ble_connected sec_flags=0x1080
2020-07-06 13:13:47.153 ? I/bt_btm: btm_find_or_alloc_dev
2020-07-06 13:13:47.153 ? W/bt_btm: btm_acl_created hci_handle=5 link_role=0  transport=2
2020-07-06 13:13:47.153 ? D/bt_btm: btm_bda_to_acl found
2020-07-06 13:13:47.153 ? D/bt_btm: device_type=0x2
2020-07-06 13:13:47.153 ? D/bt_btm: btm_bda_to_acl found
2020-07-06 13:13:47.153 ? I/bt_btm: btm_ble_start_auto_conn start=1
2020-07-06 13:13:47.153 ? D/bt_btm: btm_bda_to_acl found

Flask Web App的CSS问题

11 个答案: