scss/css中url('./logo.png')构建后404，因编译时路径基准是scss文件位置，而运行时css文件被抽离至dist不同目录，导致相对路径失效；vite更严格，仅支持绝对路径或显式别名。
SCSS/CSS变量里写url('./logo.png')为什么构建后404
因为构建工具（Webpack/Vite）在编译期解析这个路径时，基准是 SCSS 文件自身位置；但浏览器运行时加载最终生成的 CSS 文件后，又会以该 CSS 文件位置为基准重新解析 url() —— 两者不一致，路径就断了。
典型场景：组件里 style.scss 在 /src/components/Button.vue 中，写了 background-image: url('./assets/logo.png');。Webpack 编译时能找对；但构建后 CSS 被抽离到 /dist/css/chunk-abc.css，浏览器就去 /dist/css/ 下找 ./assets/logo.png，自然 404。
- Webpack 默认不处理
url()内部的相对路径，除非配css-loader的url: true+file-loader规则 - Vite 更严格：默认只识别绝对路径（
/assets/logo.png）或显式别名（url('@/assets/logo.png')），且别名必须在vite.config.ts中声明 -
~前缀（如url('~assets/logo.png')）是 Webpack 特有语法，Vite 不支持，混用会导致构建失败
为什么#{$img-path}插值能绕过路径解析问题
SCSS 变量插值（#{$var}）把路径当纯字符串注入，不触发构建工具的路径解析逻辑，也不依赖浏览器运行时的相对定位规则 —— 你写什么，最终 CSS 里就是什么。
比如定义 $img-logo: '/static/logo.png';，再写 background-image: url(#{$img-logo});，最终生成的 CSS 就是 background-image: url(/static/logo.png);，浏览器直接按根路径请求，和 CSS 文件放哪儿无关。
- 必须把变量定义在全局 SCSS 文件（如
src/styles/variables.scss）并@import进来，否则作用域不对 - 变量值里不要带
./或../，否则仍会触发错误的相对解析（尤其 Vite 构建后） - 如果部署在子路径（如
/my-app/），变量值得写成'/my-app/static/logo.png'，不能靠构建工具自动补前缀
构建后 CSS 中的url()路径为何总和 Network 面板里的 Request URL 对不上
根本原因是：CSS 文件被移动了，但里面的 url() 没跟着重算。构建工具抽离、压缩、重命名 CSS 后，它在 dist/ 里的物理位置变了，而原始 url('./img/x.png') 仍是按开发时的相对关系写的。
例如开发时 CSS 在 /src/css/index.css，引用 ../img/icon.png 是对的；构建后 CSS 输出到 /dist/assets/index.xxxx.css，但 url() 还是 ../img/icon.png，浏览器就去 /dist/assets/../img/icon.png → /dist/img/icon.png 找，而实际文件可能在 /dist/img/ 或 /dist/assets/img/。
- Webpack：加
type: 'asset/resource'规则处理图片，并用generator.filename控制输出目录，让资源路径可预测 - Vite：优先把静态资源放
public/目录，然后在 CSS 里写绝对路径url('/img/icon.png')，完全跳过构建解析 - 禁用嵌套多层
../，超过两次就说明目录结构或构建配置不合理，该重构了
字体文件在@font-face中路径失效的特殊原因
字体路径出错不只是“找不到文件”，还常卡在字体元数据匹配上：font-family: 'MiSans' 必须和字体文件内嵌的 PostScript Name 完全一致，大小写、空格、连字符都不能差。
即使 url('/fonts/MiSans.woff2') 返回 200，浏览器也可能静默忽略——Network 看不到失败请求，Elements 里也查不到该字体被应用。
- 用
fonttools（ftxvalidator或在线字体查看器）打开 .woff2 文件，确认 Full Name 和 CSS 里写的font-family是否一致 - Webpack 中若没配字体 asset 规则，小字体可能被转成 base64，大字体被丢弃，导致部分格式缺失
- Vite 中若字体放在
src/assets/fonts/却没用new URL('./x.woff2', import.meta.url).href，构建后路径必然断掉
url() 解析逻辑，和 HTML 中 <link> 的 href 解析逻辑，**完全独立、互不影响**。改对了 <link href="css/style.css">，不代表 style.css 里的 url(../img/x.png) 就一定对。两者得分别排查。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
