svg-sprite-loader专为SVG设计，可自动提取、合并SVG为雪碧图并注入<symbol>，关键需对齐import路径、symbolId规则与spriteFilename输出路径，且extract模式需配合正确引用，否则导致404或坐标错位。
直接用自动化工具生成雪碧图，比手动拼图+手算 background-position 稳定得多；但工具选错或配置不当，反而会产出坐标错位、路径 404、高清屏模糊等问题。
Webpack 项目里怎么配 svg-sprite-loader 生成雪碧图
这个 loader 专为 SVG 设计，能自动提取 <svg> 文件、合并成雪碧图、注入 <symbol> 并生成对应类名。关键不是“装上就行”，而是三处必须对齐：
- 入口文件中 import 的路径要和插件
symbolId生成规则匹配，比如 import './icons/home.svg'，则默认 symbol ID 是home -
spriteFilename配置的输出路径（如'icons/sprite.svg'）必须被 HTML 或 CSS 正确引用，否则<use href="icons/sprite.svg#home">会 404 - 若项目用 CSS Modules，需在
extract选项中设true，否则生成的 class 名带哈希但样式没注入
常见错误是 build 后 sprite.svg 没出现在 dist 目录——检查是否漏了 public/ 目录托管，或 webpack output.publicPath 没配对。
Vite 中用 vite-plugin-svg-sprite 为什么 background-position 不生效
该插件默认走 inline SVG 注入（<use> 方式），不生成传统雪碧图 + background-position 的 CSS。如果你写的是 .icon { background: url('/sprite.png'); background-position: -24px -48px; }，那根本没调用插件能力。
立即学习“前端免费学习笔记（深入）”；
- 要么切到插件推荐的用法：用
<svg><use href="/sprite.svg#home"></use></svg>，此时无需background-position - 要么关掉 inline 模式，在插件选项中启用
useSpriteSheet: true，它才会输出 PNG 雪碧图 + CSS 类，这时才需要算偏移 - 注意 Vite 的
public目录下放的sprite.png和插件生成的路径别冲突，否则本地开发时可能加载了旧图
background-position 坐标总错位？八成是单位或原点理解反了
background-position: -96px -48px 表示：把背景图往左拉 96px、往上拉 48px，让图中坐标 (96, 48) 的点对准容器左上角。不是“图标距左 96px、距上 48px”。
- 导出雪碧图时，所有图标必须严格按网格排列，比如每图宽高都是
24px，间距2px，那么第 2 行第 3 列图的 top 就是-(24 + 2) * 1 = -26px，left 是-(24 + 2) * 2 = -52px - 用 Figma/Sketch 导出前，务必打开“像素网格对齐”，否则坐标带小数（如
-26.3px），浏览器渲染发虚 - 调试时别只看设计稿，直接在 Chrome DevTools 里悬停元素，看 computed 栏里
background-position实际值，再反推你写的对不对
Retina 屏下雪碧图模糊怎么办
双倍图方案仍有效，但不能只靠 background-size 缩放——得让原始图是 @2x 尺寸，再用 CSS 压回 1x 占位。
- 准备两版雪碧图：
sprite.png（1x）和sprite@2x.png（宽高 ×2，所有图标也 ×2） - 用媒体查询切换：
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .icon { background-image: url('sprite@2x.png'); background-size: 50%; } } - 关键点：
background-size: 50%必须配合原始图是 2x，否则缩放后边缘锯齿更重；且所有background-position值保持 1x 下的数值（即不用改 -24px 为 -48px）
真正容易被忽略的是：构建工具生成的雪碧图如果没保留原始分辨率信息，或压缩时开了“自适应缩放”，@2x 图会被悄悄降质——导出时关掉“允许压缩”或“优化尺寸”选项。
