postcss-sprites 可自动构建雪碧图，但需严格配置 spritepath（相对于项目根目录）、图标同级存放、background-position 必带单位（如 -10px）、vite 下 outputpath 推荐设为 public/sprites 以保障 hmr 有效。
直接用 postcss-sprites 在构建流程里生成雪碧图，比手动拖进 PS 拼图快得多，也更可靠——前提是路径、单位、目录结构全对，否则生成的图和 background-position 会错位或压根不触发。
postcss-sprites 配置必须显式指定 spritePath
插件不会自动扫描整个 src 目录，它只认你明确告诉它的那个文件夹。常见错误是图标放在 src/assets/icons/，但配置里没写 spritePath: 'src/assets/icons'，结果样式照常编译，雪碧图却没生成。
- 所有要合并的 PNG/SVG 必须放在同一级目录下，不能有子文件夹嵌套
- Vite 用户注意：
spritePath路径需相对于项目根目录（不是src），且必须在postcss.config.js里配；vite.config.js中的css.postcss不会透传给该插件 - Webpack 用户若用
webpack-spritesmith，它是 Loader + Plugin 组合，和现代 PostCSS 流程容易冲突，优先选postcss-sprites
background-position 值必须带单位
写成 background-position: -10 -20 是无效的——postcss-sprites 解析失败后会回退为默认居左上，导致图标显示错位。它只接受带单位的写法，比如 -10px -20px 或 -1rem -0.5rem。
- 坐标系以雪碧图左上角为原点，x 向右为正、y 向下为正；人眼习惯“往上挪”写负 y，这和最终渲染一致，不用反着调
- 用了
@2x图时，插件按物理像素计算 position，但你在 CSS 里写的仍是逻辑像素（如-10px），无需手动除以 2 - 如果图标尺寸不统一（比如混着 16×16 和 24×24），生成的雪碧图留白多，定位精度下降，建议提前归一化
Vite 下 HMR 失效或定位不准的根源
改了图标文件但页面没热更新，或者新生成的雪碧图 background-position 偏移量不对——大概率是输出目录没被监听。Vite 默认不监听 dist 或你自定义的雪碧图输出路径（如 public/sprites）。
- 确保
postcss-sprites的outputPath指向一个 Vite 会自动追踪的目录（推荐public/sprites/） - 若输出到
src/下某处，需在vite.config.js的server.watch中显式添加该路径 - 检查最终生成的 CSS 是否真的替换了原始
url(./icon-home.png)；如果没替换，说明插件根本没捕获到这条规则，回头核对路径和spritePath
真正卡住人的地方往往不是工具本身，而是路径相对于谁、单位写没写、HMR 监听范围够不够——这三个点漏掉任何一个，都会让自动化变成“看似跑通，实则失效”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
