Flask网站CSS文件加载失败求助：附项目文件及目录说明

我来帮你排查几个关键问题，修正后应该就能解决CSS加载的问题了：

1. 确保静态文件目录结构符合Flask要求 #

Flask默认会从**static文件夹**读取静态资源（比如CSS、JS、图片），你需要创建一个和templates同级的static文件夹，把CSS文件放在里面。正确的项目目录结构应该是这样：

你的项目根目录/
├── main.py
├── venv/
├── templates/
│   ├── base.html
│   └── home.html
└── static/
    └── style.css

2. 修正CSS文件名的错误 #

你提到的文件是style.html，但里面写的是CSS代码——浏览器无法正确解析后缀为.html的CSS文件。请把这个文件重命名为style.css，并放到刚才创建的static文件夹里。

3. 修复CSS语法错误 #

你的CSS代码里的颜色值缺少前缀#，浏览器无法识别这个颜色：

/* 错误写法 */
body {background-color:000000;}

/* 正确写法二选一 */
body {
    background-color: #000000;
    /* 或者更简洁的：background-color: black; */
}

4. 确认base.html中的引用路径 #

你当前base.html里的引用代码是正确的：

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

只要前面的目录和文件名都修正到位，这个路径就能正常加载CSS。

最后重启一下你的Flask应用（如果是新增了static文件夹，可能需要手动重启一次），刷新页面就能看到效果了。

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