css路径错误主因是混淆基准点：html中link的相对路径以html文件为起点，css内@import和url()均以css文件自身位置为起点，绝对路径“/”从域名根开始；单文件组件中style标签的url()需构建工具显式支持别名或改用js导入。
CSS文件404：相对路径为什么总差一级
浏览器加载CSS时显示 net::ERR_ABORTED 404，大概率是相对路径写错了。相对路径从HTML文件所在位置出发计算，不是从CSS文件自身位置——这是最常被忽略的前提。
比如 index.html 在 /src/pages/，引用 ../styles/main.css，那浏览器就会去请求 /src/styles/main.css；但如果 main.css 里又用 @import "vars.css"，这个 vars.css 的路径就从 /src/styles/ 开始算，不是从 /src/pages/。
- 用开发者工具的 Network 面板点开失败的CSS请求，看浏览器实际发的是哪个URL，反推路径起点
- 避免在CSS内部用
@import带相对路径，尤其跨目录时——它不继承HTML的基准路径 - 如果必须用
@import，优先写成绝对路径，如@import "/styles/vars.css";
绝对路径加斜杠还是不加：/static vs static
以 / 开头的路径是根绝对路径，从域名后第一级开始；不加 / 是相对路径。但很多人混淆了“服务器根目录”和“项目源码根目录”。
比如本地开发用 Vite，public/ 下放的文件可通过 /xxx.css 直接访问；但如果你把CSS放在 src/assets/，构建后它会被复制到 /assets/xxx-xxxx.css，此时写 /src/assets/main.css 肯定404。
-
/styles/main.css→ 请求https://site.com/styles/main.css，需确保该路径有静态服务响应 -
styles/main.css→ 相对于当前HTML路径，可能变成/pages/styles/main.css - Vite/Webpack 中，
public/下资源走根路径，src/下资源必须用import或url()让打包器处理
background-image路径失效：CSS里的url()不是相对HTML
CSS中 url() 的路径基准永远是CSS文件自身位置，和HTML在哪毫无关系。这也是最隐蔽的坑——HTML路径改了不影响它，但CSS挪个文件夹，所有 url() 就全挂。
例如 css/components/button.css 里写了 background-image: url("../images/bg.png")，那它找的是 css/images/bg.png，而不是 images/bg.png 或 src/images/bg.png。
- 构建工具（如PostCSS）可配
postcss-url插件自动重写路径，但需明确声明url类型 - 现代方案更推荐用
import引入图片，在JS中传给CSS变量或内联样式，路径由模块系统解析 - 实在要用
url()，统一把图片放在CSS同级或子目录下，减少上级跳转
Vue/React单文件组件里
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
