Sass中url('@/assets/bg.png')构建后404，因Sass不解析@/别名且构建工具默认不重写Sass内url路径；推荐用public目录绝对路径，或由JS导入图片动态绑定style。
为什么Sass里写url('@/assets/bg.png')构建后404
Sass编译器本身不解析@/这种Webpack或Vite的模块别名，它只把url()里的内容当纯字符串原样输出。构建工具（如Vite）的CSS处理链默认也不会扫描Sass文件里的url()去重写路径——所以url('@/assets/bg.png')最终变成浏览器请求https://example.com/@/assets/bg.png，自然404。
用public目录+绝对路径是最稳的解法
适合logo、banner、icon等不需哈希、不常变动的资源。构建工具完全跳过public目录，路径绝对可控。
- 把图片放进
public/assets/bg.png - Sass中写
background-image: url('/assets/bg.png');（开头必须有/） - 确认
vite.config.ts中base配置匹配部署路径：比如部署在子路径/my-app/，就要设base: '/my-app/'，最终请求地址才是https://example.com/my-app/assets/bg.png
需要哈希或动态切换？必须交给JS处理
当图片要压缩、加hash、按主题切换时，CSS已无能为力——得让构建工具真正“看见”这张图。
- 在组件里
import bg from '@/assets/bg.jpg'; - Vue中绑定：
:style="{ backgroundImage: `url(${bg})` }" - React中：
style={{ backgroundImage: `url(${bg})` }} - 全局mixin里不能
import？那就把bg作为参数传入，由调用方提供已导入的变量
千万别信“sass-loader配alias就能解决”
这是个常见误解。即使你在vite.config.ts里配了resolve.alias，Sass编译阶段仍不会触发模块解析；url('~@/assets/...')是旧版Webpack+css-loader的hack，Vite不支持，Vue CLI 5+也已弃用。真正的关键点只有一个：Sass里所有url()都是裸字符串，构建工具是否重写它，取决于这个字符串有没有被loader拦截识别——而默认情况下，它不会。
立即学习“前端免费学习笔记（深入）”；
