SCSS中url('@/assets/logo.png')报错或404，因sass编译器不识别@别名且CSS处理链不解析SCSS内url()；应改用public目录绝对路径或JS动态导入实现哈希与资源管理。
SCSS里写url('@/assets/logo.png')报错或构建后404，根本不是语法问题，而是构建工具没把它当模块处理——路径字符串没被重写，也没参与哈希。
为什么url('@/assets/...')在SCSS里不生效
Vue CLI 或 Vite 的 CSS 处理链（比如 css-loader）默认只解析 JS/TS 中的 import，对 SCSS 里的 url() 不做模块解析。你写的 @/ 是 Webpack 别名，但 SCSS 编译器（sass）根本不认识它。
-
url('@/assets/logo.png')→ 构建时原样输出，浏览器按相对路径去找，自然 404 -
url('~@/assets/logo.png')→ 这是旧版 Webpack +resolve.alias+css-loader的 hack 写法，Vite 不支持，Vue CLI 5+ 也已弃用 -
url('../assets/logo.png')→ 路径基准是编译后的 CSS 文件位置（如/dist/css/app.css），不是源码里的 SCSS 文件，层级一变就失效
Vite 项目：用 public 目录 + 绝对路径最稳
适合 logo、banner、icon 等不需哈希、不常变动的资源。构建工具不碰它，路径完全可控。
- 把图片放进
public/assets/logo.png - SCSS 中写
background: url('/assets/logo.png');（开头必须有/） - 确认
vite.config.ts中base配置匹配部署路径：base: '/my-app/'→ 实际请求地址就是https://example.com/my-app/assets/logo.png - 不用改任何 loader 或 alias，也不依赖构建时重写逻辑
需要哈希或动态切换？走 JS 动态导入
当图片要压缩、加 hash、按主题切换，就必须让构建工具介入处理——那就别塞进 CSS，交给 JS 控制。
立即学习“前端免费学习笔记（深入）”；
- 在组件里
import bg from '@/assets/bg.jpg'; - 绑定样式：
:style="{ backgroundImage: `url(${bg})` }"（Vue）或style={{ backgroundImage: `url(${bg})` }}（React） - 这样
bg是真实模块路径，构建后自动变成/assets/bg.8a1f2e.jpg，且带 hash 和压缩 - 全局 mixin 里不能直接 import？那就把图片路径作为参数传入，由调用方传入已 import 的变量
真正容易被忽略的是：SCSS 本身没有“资源处理”能力，所有路径都只是字符串。你以为在写路径，其实是在拼接裸 URL；构建工具是否重写它，取决于这个字符串有没有被 loader 拦截识别——而默认情况下，它不会。
