css中url()路径相对于css文件位置而非html页面，易因目录结构不匹配导致404；应使用根相对路径、构建工具自动处理或import资源变量注入。
background-image路径在CSS文件里为什么总404
因为CSS里的url()路径是相对于CSS文件位置计算的，不是HTML页面位置。很多人把图片放在./images/，却把CSS放在/css/style.css，结果浏览器实际请求的是/css/images/icon.png——显然不存在。
- 检查浏览器开发者工具Network面板，看实际加载的资源路径是不是你预期的
- 用绝对路径
url(/images/logo.png)可绕过问题，但会限制部署目录结构 - 推荐统一用根相对路径（以
/开头），前提是项目部署在域名根目录；否则得配合构建工具做路径重写 - Webpack/Vite等工具中，
url(./icon.svg)会被自动转为base64或hash文件名，但原始CSS文件本身不支持这种解析
@import和@font-face里的路径怎么写才安全
@import和@font-face中的url()同样遵循“相对于当前CSS文件”的规则，但容易被忽略的是字体格式和跨域问题。
-
@import url("./reset.css")：路径必须存在，且不能是HTTP跳转后的地址（比如重定向到CDN） -
@font-face { src: url("./fonts/inter.woff2") }：如果字体文件在/static/fonts/，而CSS在/dist/css/app.css，就得写url("../../static/fonts/inter.woff2") - 字体加载失败时，控制台可能只报
Failed to decode downloaded font，实际是路径错导致返回了404 HTML页面 - 开发环境用Live Server或Vite默认服务时，
public/目录下的资源走根路径，CSS里应写url("/fonts/xxx.woff2")
CSS-in-JS或CSS模块里还能用相对url()吗
不能直接用。像styled-components、emotion或css-loader处理的模块中，url("./icon.png")不会被识别为路径引用——它只是字符串字面量，除非你显式配置了loader解析。
- Webpack中需启用
css-loader的url: true选项（v6+默认开启），并确保file-loader或asset-module已配好 - Vite中默认支持
url("./img.svg")，但仅限.css或.module.css，JSX里的style={{ backgroundImage: "url(./x.png)" }}不会被处理 - 最稳的方式：把资源import进来，再用变量注入，比如
import icon from "./icon.png"; background: `url(${icon})` - 注意：CSS模块的
composes语法不解析url，只处理类名组合
构建后CSS里路径突然全错，怎么定位
常见于Webpack的publicPath、Vite的base或PostCSS插件（如postcss-url）改动了原始路径语义。
- 先看生成的CSS文件里
url()内容：是原始相对路径？还是被转成/assets/xxx.abcd123.png？后者说明loader已介入 - Webpack中
output.publicPath设为"auto"或"/"会影响所有资源前缀，但CSS内联的url()是否跟随取决于css-loader的esModule和url配置 - Vite中若设
base: "/myapp/"，则所有url()会自动补前缀，但url("/api/")这种绝对路径不会动 - PostCSS插件如
postcss-url可能把小图转base64，或把路径重写为CDN地址——检查postcss.config.js是否启用了它
路径问题本质是“上下文错位”：CSS文件位置、构建输出位置、运行时访问路径三者没对齐。调试时盯住一个资源，从HTML引入的CSS路径开始，逐层推导浏览器最终请求的URL，比猜配置更可靠。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
