树莓派部署Flask服务CSS失效问题求助

我在树莓派上用Flask搭建服务器时遇到CSS无法生效的问题，页面仅显示纯HTML内容。相同的代码、文件名和目录结构在其他环境下可以正常运行，但树莓派上不行。

已尝试过以下方法（无需再建议）：

• 切换静态文件引用方式（url_for和直接路径）
• 使用cmd+shift+R强制刷新浏览器缓存
• 修改CSS文件名

相关代码 #

HTML模板（learn.html）

<!DOCTYPE html>
<html>
    <head>
        <title>THD</title>
        <link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
    </head>
<html>

Flask主程序

from flask import Flask, render_template

app = Flask(__name__)

@app.route("/")
def main_page():
    return render_template('learn.html')

目录结构 #

排查与解决方向 #

1. 检查文件权限
   树莓派的文件权限管控严格，静态文件目录和CSS文件可能没有被Flask进程读取的权限。执行以下命令修改权限：

# 给static目录及所有内容添加可读权限
sudo chmod -R 755 /path/to/your/project/static
# 单独给styles.css设置可读权限
sudo chmod 644 /path/to/your/project/static/styles.css

2. 显式指定静态目录配置
   虽然Flask默认静态目录为static，但显式指定可避免路径识别异常：

app = Flask(__name__, static_folder='static')

确保static_folder的值与实际目录名完全一致。

3. 彻底清除浏览器缓存
   强制刷新可能未彻底清除缓存，打开浏览器开发者工具（F12），在Network选项卡勾选「Disable cache」后重新加载页面。

4. 验证静态文件可直接访问
   启动Flask后，在浏览器访问http://<树莓派IP>:5000/static/styles.css：

• 若能看到CSS内容，说明路径无问题，需排查前端引用逻辑；
• 若返回404，说明Flask未找到文件，检查目录结构或权限。

5. 对齐Flask版本
   树莓派上的Flask版本与其他环境差异可能导致静态文件处理异常：

# 查看当前Flask版本
pip show flask
# 安装与其他环境一致的版本
pip install flask==<目标版本号>

内容的提问来源于stack exchange，提问作者NoFallToggled