本地开发CSS 404主因是file://协议下/路径指向磁盘根而非项目根，需用HTTP服务（如Live Server）或相对路径；CSS中url()基准为CSS文件自身位置，构建后易错乱，须统一配置publicPath或交由构建工具处理。
本地开发时 CSS 引入 404，90% 是因为用了 file:// 协议直接双击打开 HTML 文件——此时以 / 开头的路径会指向磁盘根目录（如 C:/），而不是你的项目文件夹。
为什么双击打开 HTML 就 404？
浏览器在 file:// 协议下不支持站点根目录概念：href="/css/style.css" 会被解析为 file:///css/style.css，显然不存在。这不是你路径写错了，而是协议本身就不支持这种解析逻辑。
- Live Server、Vite Dev Server、Webpack Dev Server 等 HTTP 服务才能正确处理
/开头的路径 - VS Code 的 “Open with Live Server” 插件默认起服务在
http://127.0.0.1:5500/，此时/css/style.css才真正指向项目根下的css/目录 - 用
python -m http.server 8000启动服务时，/指向的是当前命令执行目录，不是项目根（容易误判）
相对路径怎么写才不会错层？
只要 HTML 和 CSS 在文件系统中有明确层级关系，就按“HTML 文件所在位置 → 数清跳转步数”来写，别猜、别靠感觉。
-
index.html和style.css都在项目根目录 →href="style.css"（./style.css冗余，可省） -
index.html在src/pages/，style.css在src/css/→href="../../css/style.css"（从pages/退两级到项目根，再进css/） - 超过两次
../就该警惕：要么调整目录结构，要么换构建工具接管路径
Vite/Webpack 项目里 CSS 中的 url() 为啥总挂？
CSS 文件里的 url("logo.png") 基准永远是 CSS 文件自身位置，和 <link> 的 href 完全无关。开发时看着对，构建后抽离到 dist/css/，图片却在 dist/img/，相对路径立刻失效。
立即学习“前端免费学习笔记（深入）”；
- Vue CLI / Webpack 项目：配
MiniCssExtractPlugin的publicPath: "../"，让插件自动重写所有url() - Vite 项目：优先把图片放
src/assets/，用@import "@/assets/logo.png"或 JSimport，交给构建器解析；public/下资源才直接写url("/logo.png") - 别在 CSS 里硬写
../img/logo.png——CSS 文件一挪位置，所有路径全得手动改
最隐蔽的坑是：HTML 路径改对了，CSS 文件能加载，但里面所有 url() 和 @import 还是 404。它们各自有各自的基准点，不能混为一谈。构建工具的 publicPath 和 css-loader 配置必须一致，否则开发能跑、build 后全挂。
