.w-icon { background-image: url(./sprites-generated.png); } .w-icon-apply { width: 25.5px; height: 27px; } .w-icon-apply .w-icon, .w-icon-apply.w-icon { width: 51px; height: 54px; background-position: -208px -58px; margin-top: -27px; margin-left: -25.5px; }
接下来就是在使用组件中引用上述样式即可。
3.遇到的问题
3.1 放大页面时，有些雪碧图标边缘出现相邻图标的边缘，从而出现白线，怎么破？
做完雪碧图之后，高高兴兴的拿给UI参看一下，没过多久就被鄙视了：怎么页面放大时，旁边有一条白线？
纳尼？怎么可能啊！仔细一看，放大之后有些图标周边出现一些线条，而有些图标则没有。而不放大时，则没有这种情况。
难道是其他图表也显示进来了？再回去看看生成的雪碧图，果然是一个图标一个图标的紧紧的靠在一起，即图标之间没有空隙。而且有些图标计算的结果有 .5px ，我们知道有些浏览器会解析成1px，从而出现上述问题，瞬间恍然大悟。
于是仔细翻阅官方说明，其中提到核心组件是 spritesmith and spritesheet-templates ，于是进入 spritesmith 插件中查阅，发现果然有关于边距问题的描述和解决方法
可是在 webpack-spritesmith 又该怎么使用呢？
查阅 webpack-spritesmith 源代码和文档，发现：spritesmithOptions - optional. Options for spritesmith
好的，就是你啦！然后在 webpack 配置文件中，增加 padding 属性，这里单位为 px：
plugins: [ // 雪碧图设置 new SpritesmithPlugin({ // ... 省略其他配置 // 核心组件配置 spritesmithOptions: { padding: 4, } }) ],
重新启动项目编译，打开雪碧图和样式，发现图标之间有间隙了，且放大页面后，图标边缘也没有出现白线问题。好了，搞定！
总结
有了这个插件之后，我们就可以在配置目录下动态添加图标，此时webpack 会立即重新编译生成新的雪碧图和对应样式，这样我们就可以在页面上立刻使用对应图标，再也不用担心自己设置的 background-position 有不对的地方了。好了，Have Fun!