直接写相对路径易出错，推荐用$assets-url变量统一管理；Webpack alias需加~前缀且配置sass-loader；动态换图须用CSS变量+JS，非Sass编译期逻辑。
为什么直接写 url("../img/bg.png") 在 Sass 里容易出错
路径层级一变，比如把 _header.scss 从 styles/components/ 移到 styles/layout/，所有 ../ 就得重数；多人协作时有人写 ../../，有人写 ../../../，最后连自己都数不清；更麻烦的是，Webpack alias（如 ~assets）在 Sass 里不自动生效，url("~assets/img/bg.png") 会被原样输出成字面量，浏览器根本找不到文件。
用 $assets-url 变量统一管理路径源头
把路径逻辑收口到一个变量，比硬编码可靠得多。它不依赖文件位置，也不怕重构，改一处，全局生效。
-
$assets-url定义在_variables.scss里，例如：$env: "dev";<br>$assets-url: if($env == "prod", "https://cdn.example.com/assets", "/assets");
- 所有背景图都基于它拼接：
.hero { background-image: url(#{$assets-url}/images/hero.jpg); } - 别在
@import路径里用它——Sass 的@import不支持变量插值，会报错 - 如果项目用 Vite，
$assets-url拼出的路径需配合public/目录或base配置，否则生产环境可能 404
Sass 中正确使用 Webpack alias（如 ~assets）
Webpack 的 alias 对 JS 有效，但对 Sass 里的 url() 默认无效。必须加 ~ 前缀，且确保 sass-loader 配置了 sourceMap: true 和正确的 resolve.alias。
- 在
vue.config.js或webpack.config.js里配置 alias：config.resolve.alias.set('~assets', path.resolve(__dirname, 'src/assets')); - Sass 文件中必须写成：
background-image: url("~assets/img/logo.svg");—— 少一个~就是静态字符串 - 不要写
url("@/assets/img/logo.svg")，@别名在 Sass 里不被识别 - Vue2 项目常见翻车点：alias 设了
~img，但忘了在sass-loader的options里传sourceMap，导致热更新后路径解析失效
需要运行时切换背景图？靠 CSS 变量 + JavaScript，不是 Sass
Sass 是编译期工具，它生成完 CSS 就退出了。所谓“动态”，只能发生在浏览器里。Sass 顶多帮你把初始值设好，真换图得靠 JS 驱动 CSS 变量。
立即学习“前端免费学习笔记（深入）”；
- 先在 CSS 里定义变量：
:root { --bg-hero: url("/assets/images/default.jpg"); }<br>.hero { background-image: var(--bg-hero); } - JS 运行时修改：
document.documentElement.style.setProperty('--bg-hero', 'url("/assets/images/theme-dark.jpg")'); - 别试图用 Sass 的
@if或@for去生成不同主题的background-image块——那只是预编译出多套静态规则，无法响应用户操作 - 如果要支持主题色+背景图联动，CSS 变量必须分开定义：
--bg-path和--bg-color，再用background复合属性组合
