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目录，路径绝对可控。
Wjs Localizing Video
下载
用于端到端视频本地化流程的轻量编排器，路由至四个专注子技能——/wjs-transcribing-audio、/wjs-translating-subtitles...
- 把图片放进
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拦截识别——而默认情况下，它不会。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
