Flask登录页面项目：HTML无法加载login.css样式求助

1. 调整静态文件目录结构 #

Flask有固定的静态资源规则，静态文件（CSS/JS/图片等必须放在项目根目录的static文件夹下），你现在把login.css放在templates文件夹里，Flask无法识别这个路径的静态资源。

• 操作：在项目根目录新建static/css文件夹，将login.css、对应的.scss和.cssmap文件全部移到这个文件夹中。

2. 修正样式表引用路径 #

修改HTML头部的<link>标签，使用符合Flask规则的路径：

• 推荐使用Flask模板语法url_for（确保HTML文件是通过Flask路由渲染的模板）：

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

• 若暂时不想用模板语法，可直接写绝对路径：

<link rel="stylesheet" type="text/css" href="/static/css/login.css">

3. 修复HTML头部的拼写错误 #

你的meta标签存在两处拼写错误（虽然不直接影响样式加载，但建议修正）：

• width=devilce-width 改为 width=device-width
• intial-scale=1 改为 initial-scale=1

4. 用浏览器开发者工具排查 #

打开浏览器F12开发者工具：

• 切换到「网络」标签，查看login.css的请求状态：如果是404，说明路径仍错误；如果是200但样式不生效，检查CSS内容是否正确，或是否被其他样式优先级覆盖。
• 查看「控制台」标签，确认是否有资源加载报错（如权限、跨域问题）。

5. 检查Sass编译输出路径 #

确认VSCode的Live Sass Compiler编译后，login.css确实输出到了static/css文件夹中。可在编译器设置里核对输出路径，避免编译文件位置错误。

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