Flask项目中CSS动画不显示？新手求助解决方案

问题原因 #

1. Flask自带默认的静态文件处理机制，无需手动编写路由，你自定义的/css/<path:filename>路由可能和文件实际路径不匹配，或者HTML中的引用路径错误。
2. HTML里的./style.css是相对路径，在Flask根路由下会请求/style.css，但你的自定义路由是/css/<filename>，两者路径不对应，导致CSS文件无法被正确请求到。
3. 文件夹结构不符合Flask的默认规范，导致框架无法定位静态资源。

解决办法 #

步骤1：规范项目文件夹结构 #

按照Flask的默认约定调整结构，静态文件统一放在static目录下：

你的项目根目录/
├── app.py  # 你的Flask主文件
├── templates/
│   └── prueba.html
└── static/
    └── css/
        └── style.css

步骤2：修改HTML中的CSS引用路径 #

使用Flask内置的url_for函数生成正确的静态文件URL，确保路径不受路由变化影响：

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

步骤3：删除自定义的CSS路由 #

Flask自带了静态文件处理路由（/static/<path:filename>），无需手动编写，删除你添加的以下代码：

@app.route('/css/<path:filename>')
def css_file(filename):
    file_path = os.path.join('css', filename)
    return send_file(file_path) 

验证 #

重启Flask应用，访问根路径后，打开浏览器开发者工具的「网络」面板，检查style.css的请求状态码是否为200，确认文件已正确加载。

补充说明 #

如果你坚持要使用自定义路由来处理CSS文件，需要满足两个条件：

• CSS文件必须放在项目根目录的css文件夹下（和你的os.path.join('css', filename)对应）
• HTML中的引用路径要改为/css/style.css，确保和自定义路由匹配

但更推荐使用Flask默认的static目录机制，这是官方推荐的规范，能避免路径匹配问题。

内容的提问来源于stack exchange，提问作者Fátima Ramone