CSS加载失败主因是路径错误，解析起点为HTML文件所在目录；相对路径以HTML为基准，绝对路径以网站根目录为起点；@import在CSS中解析起点为当前CSS文件；需确保服务器配置、文件路径、URL三者严格匹配。
CSS 文件路径写错导致 404 是最常见的加载失败原因
浏览器控制台报 Failed to load resource: net::ERR_ABORTED 或 404 Not Found，90% 情况是路径没写对。关键不在“怎么写好看”，而在“相对谁、从哪算起”。link 标签的 href 值解析起点永远是当前 HTML 文件所在目录，不是 CSS 文件位置，也不是服务器根目录（除非用 / 开头）。
- 用相对路径时，以 HTML 文件为基准：HTML 在
/pages/index.html，要引入同级的style.css，就写href="style.css"；要引入上一级的css/main.css，就写href="../css/main.css" - 用绝对路径（推荐线上环境）：以网站根目录为起点，如
href="/static/css/app.css"。前提是服务器配置了静态资源路由，且该路径真实存在 - 避免使用
file://协议直接双击打开 HTML：此时浏览器会拒绝加载跨目录的 CSS（安全限制），必须走本地 HTTP 服务（如python3 -m http.server）
Webpack/Vite 等构建工具里，@import 的路径解析规则不同
在 CSS 文件内部用 @import 引入其他 CSS 时，路径解析起点变成“当前 CSS 文件所在目录”，和 HTML 中的 link 不一致。这容易造成开发时正常、构建后 404。
- Vite 默认支持别名（如
@/styles/vars.css），但需在vite.config.js中配置resolve.alias，否则@import "@/styles/vars.css"会报错 - Webpack 的
css-loader默认不解析@import中的别名，需配合resolve.alias+importLoaders或改用postcss-import - 统一建议：CSS 内部尽量少用
@import，优先用构建工具的入口聚合（如主 CSS@import所有模块）或 JS 动态导入
HTTP Server 静态资源路径与 HTML 中写的路径必须严格匹配
比如 Nginx 配置了 location /assets/ { alias /var/www/static/; }，那么 HTML 中必须写 href="/assets/css/app.css"，不能写 /static/css/app.css 或 ./css/app.css。
- 检查服务器实际返回的文件路径：用浏览器开发者工具 Network 标签页，点开 CSS 请求，看
Request URL是什么，再比对服务器上文件真实路径 - 注意大小写：Linux 服务器路径区分大小写，
Style.css和style.css是两个文件 - URL 编码问题：路径含中文或空格时，浏览器会自动编码，但服务器可能未正确解码——应避免在路径中使用非 ASCII 字符
/* 示例：Nginx 配置片段，确保 /static/ 映射到磁盘路径 */
location /static/ {
alias /home/user/project/dist/static/;
expires 1y;
add_header Cache-Control "public, immutable";
}开发阶段快速验证路径是否有效的办法
别等部署才发现 404。在浏览器地址栏直接粘贴 CSS 的完整 URL（比如 http://localhost:5173/static/css/app.css），回车。如果看到原始 CSS 内容，说明路径通；如果跳转到 404 页面或下载文件，说明路径或服务器配置有问题。
立即学习“前端免费学习笔记（深入）”；
- VS Code 用户可安装插件
Open in Browser，右键 HTML 文件选择 “Open in Default Browser”，确保走http://而非file:// - Chrome 控制台输入
document.querySelector('link[rel="stylesheet"]').href，能直接看到浏览器最终解析出的绝对 URL，比肉眼判断更可靠 - 构建后检查生成的 HTML：Vite 输出的
index.html中href值是否带哈希（如app.a1b2c3.css），对应文件是否真出现在dist/目录下
路径问题本质是“上下文错位”：你以为从 A 算起，其实浏览器从 B 解析。每次改路径，先确认当前 HTML 文件在哪、目标 CSS 文件在哪、服务器怎么映射，三者对齐了，404 就消失了。
