Flask项目中CSS文件无法链接到HTML页面的问题求助

核心问题：静态文件目录错误 #

Flask默认约定静态文件（CSS/JS/图片）必须放在根目录下的static文件夹，templates仅用于存放HTML模板文件。你的style.css放在templates里，Flask无法正确识别并提供这个文件，导致样式无法加载。

修复步骤 #

1. 调整项目目录结构 #

把style.css从templates移到新建的static文件夹，最终结构如下：

根目录/
├── app.py
├── templates/
│   └── home.html
└── static/
    └── style.css

2. 修改HTML中的CSS引入路径 #

在home.html中，使用Flask提供的url_for函数生成正确的静态文件路径，替换原来的<link>标签：

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

url_for('static', filename='style.css')会自动生成指向static/style.css的绝对路径，避免手动写路径出错。

3. 验证CSS代码正确性 #

检查style.css中的h1样式是否正确编写，示例：

h1 {
    font-family: 'Times New Roman', Times, serif;
    color: #7393B3; /* 蓝灰色，可根据需求调整色值 */
}

4. 确保Flask路由正确渲染模板 #

确认app.py中的路由代码正确返回模板，示例：

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def home():
    return render_template('home.html')

if __name__ == '__main__':
    app.run(debug=True)

5. 清除浏览器缓存 #

如果修改后样式仍不生效，按Ctrl+F5强制刷新浏览器，避免浏览器加载旧的缓存文件。开启debug=True时，Flask会自动监测文件变化并刷新，开发阶段建议保持开启。

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