CSS 未加载
快速摘要
你的 CSS 文件没被浏览器加载——可能是路径错、被 CSP 拦截,或 MIME 类型不对。
为什么发生
<link href>路径错误,文件 404服务器返回的
Content-Type不是text/css,浏览器拒绝当作样式表CSP 的
style-src限制了该样式来源样式表在构建时被意外排除
最小示例
✗ 错误代码
<link rel="stylesheet" href="/style.css">✓ 修复代码
<link rel="stylesheet" href="/assets/css/style.css">实际文件在 /assets/css/style.css,路径写错就 404,页面无样式。修正路径即可。
如何诊断
在 Network 面板查看该 CSS 文件的状态码和
Content-Type在 Elements 面板确认样式是否出现在 Styles 栏
检查
link标签的href路径
如何修复
修正
href路径,确保文件能被正确加载配置服务器返回正确的
Content-Type: text/css调整 CSP
style-src,允许该样式来源
如何预防
使用构建工具自动管理样式表路径
部署时检查服务器 MIME 类型配置