SCSS中url()路径404是因为Sass不解析其字符串而原样输出，浏览器按CSS文件位置解析相对路径；推荐用$assets-url变量统一管理路径，避免硬编码和image-url()函数，确保Sass编译、构建工具与浏览器三层路径语义对齐。
SCSS里url()路径为什么总404
因为Sass编译器不解析url()里的字符串，它原样输出到CSS；而浏览器加载CSS时，会按url()中写死的路径去请求资源——这个路径是相对于CSS文件位置计算的，不是HTML页面，也不是Sass源文件位置。常见错误现象：你在_header.scss里写background-image: url("../images/bg.jpg")，但该文件被@use进多层嵌套的theme/light.scss，最终生成的CSS在/dist/css/app.css，浏览器就去找/dist/images/bg.jpg，自然404。
用$assets-url变量统一拼接路径最稳
硬编码相对路径在Sass项目里极易失效，尤其当@use层级变深、目录重构或切换CDN时。推荐在_variables.scss中定义一个根路径变量：
$env: "dev" !default; $assets-url: if($env == "prod", "https://cdn.example.com/assets", "/assets");
所有资源引用都用字符串拼接：
background-image: url(#{$assets-url}/images/logo.png);@font-face { src: url(#{$assets-url}/fonts/inter.woff2); }- 避免在
@import语句中使用该变量（Sass import不支持插值）
别再用image-url()函数
image-url()是Compass时代的遗留函数，Dart Sass已不内置支持。现代构建工具（Webpack/Vite）对静态资源的处理逻辑（如hash重命名、base64内联、CDN前缀注入）和image-url()的路径假设冲突，导致开发能跑、打包后404。错误现象包括：
立即学习“前端免费学习笔记（深入）”；
- Vite报
Undefined mixin image-url - Webpack中
resolve.alias配置了@/assets，但image-url("icon.svg")仍按原始相对路径找文件
替代方案就是上面的$assets-url变量拼接，无依赖、可预测、兼容所有构建链路。
字体和@import路径要单独核对
@font-face和@import中的url()同样遵循“相对于当前CSS文件”的规则，但容易被忽略：
-
@import url("./reset.css")：路径必须真实存在，且不能是HTTP重定向地址（比如指向CDN的302跳转） -
@font-face { src: url("./fonts/xxx.woff2") }：如果字体实际在/public/fonts/，而CSS输出到/dist/css/，就得写url("/fonts/xxx.woff2")（根相对路径） - 在Vite中，
public/下资源走根路径，直接url("/fonts/xxx.woff2")即可；Webpack则需确认output.publicPath是否匹配
真正麻烦的从来不是怎么写，而是路径语义在Sass编译、构建工具处理、浏览器加载这三层之间是否对齐——漏掉任意一层，url()就变成盲猜。
