scss本身不处理url路径版本号，哈希必须由构建工具（webpack/vite）通过asset模块重写文件名实现；手拼?v=参数不可靠，易导致404或缓存失效。
SCSS里用@import或url()引入图片时，版本号不会自动生效
SCSS编译阶段只处理语法转换，不触碰URL路径。写background: url('./img/logo.png');，最终CSS里还是url("./img/logo.png")——加?v=1.2.0这种事，SCSS本身做不到。构建工具（如Webpack/Vite）也不会主动重写CSS里的url()内容，除非你显式配置资源重写规则。
Webpack项目中让SCSS背景图带哈希，得靠file-loader或asset模块配置
Webpack 5+ 默认用asset类型处理图片，但必须满足两个条件，哈希才会进最终CSS的url()：
- 图片路径是相对路径（如
./assets/icon.svg），不能是绝对路径或别名路径（如~assets/icon.svg） - SCSS文件本身被
css-loader+MiniCssExtractPlugin处理，且css-loader开启url: true（默认开启） - Webpack配置里
module.rules对.png|.jpg|.svg等后缀启用type: 'asset'，并设置generator.filename含[hash]，例如：'img/[name].[hash:8][ext]'
这样编译后，background: url('./img/logo.png');会变成background: url("/img/logo.a1b2c3d4.png");——哈希已嵌入文件名，无需查询参数。
Vite项目中SCSS背景图自动哈希，关键看build.rollupOptions和assetsInclude
Vite默认对src下静态资源做哈希，但SCSS里写的url()路径必须匹配assetsInclude规则，否则会被忽略：
- 确保图片放在
src/assets/下，且SCSS中引用为url('@/assets/icon.png')或url('../assets/icon.png') - 在
vite.config.ts中确认build.rollupOptions.output.assetFileNames包含哈希占位符，例如：'assets/[name].[hash].{ext}' - 如果图片在
public/目录下，Vite不处理它——url('/icon.png')永远不变，哈希无效
常见错误：把图片放public/却指望Vite重命名，结果CSS里仍是url("/icon.png")，改了图也白改。
手写SCSS函数强行拼接版本号？不推荐，且容易出错
有人试过定义SCSS函数，比如@function bg-url($path) { @return url('#{$path}?v=#{$VERSION}'); }，再配$VERSION: '2.3.0';。这看似可行，但问题明显：
-
$VERSION要每次构建手动更新，漏一次就缓存失效 - CDN或代理可能剥离
?v=，导致实际仍加载旧图 - Webpack/Vite无法识别这种字符串拼接，不会把
$path对应的真实文件纳入打包依赖，图片删了也不报错 - 生成的CSS里出现
url("logo.png?v=2.3.0")，而服务器根本没这个带参数的文件——路径解析失败
真正可靠的方式只有一种：让构建工具控制文件名，而不是在URL上打补丁。SCSS负责写相对路径，其余交给Webpack或Vite的asset处理链。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
