vue-cli3中使用精灵图的过程以及结果

最近做的项目呢，图标比较多，之前没有使用精灵图，通过webpack设置，小于6k的打成base64，这样子，我的css会有一点点偏大（通过背景图引入的），后来想着试试精灵图了，然后一阵百度，其实大家用的工具都大同小异吧，贴一个我参考的博客（https://juejin.im/post/6844903954736742413）

其实正常的弄呢，是没啥问题的，我在这个过程中踩了一点点的坑

1，精灵图的路径问题

apiOptions: {
  cssImageRef: "./assets/images/sprite/sprite.png"
},

这个路径就是生成的css里面引用图片的路径，需要根据自己的项目来，如果直接相对路径是有问题的，显示不了图片

 

2，就是适配rem了，我的做法简单粗暴，就是直接将px全部换算成rem，具体的换算比例根据自己的实际情况来，像我的是px/200 = 1rem

 

这样，当你npn run dev/serve  就可以在相应目录生成css和对应的精灵图了

比较方便

如果图片固定了的话，就可以在vue.config.js里面注释掉生成精灵图的步骤，自己将精灵图该压缩的压缩，毕竟生成的图还是挺大的呢，

 

说个我之前不知道的css小知识，对于不使用css,可以使用unset值例如

top: unset;
bottom: 0.5rem;

这个对于覆盖之前的属性，写新属性比较有用。