smallpic-2-css批量生成CSS背景图
从文件夹里一堆小图生成 CSS 的工具，smallpic-2-css真挺省事。它不搞 Sprite 合成图，也不需要你额外压缩啥图片，就直接用 background-image: url(...) 这一招，配合 webpack 的 url-loader，还能和老项目无缝接轨。
原理不复杂：你有一堆比如 logo/*.png，它就能帮你批量生成对应的 CSS 类名，每张图都挂上 background-image。以前搞 Sprite，动不动就要切图+合图+坐标，现在这些都可以不用管了。
用法也简单，就一个函数 gen，传路径和配置就行：
var gen = require('smallpic-2-css');
gen('root/logo/*.png', {
out: 'dist/logo.css',
urlRoot: '../logo/'
});它其实更适合给那些从 Compass 精灵图迁移出来的老项目用。你如果有历史包袱，这个库帮你断舍离；你如果从零开始，也能少踩不少坑。
建议搭配 url-loader 一起用，图片的事就省心多了。图片自动转 base64 或外链，CSS 自动生成，一套流程走下来还挺爽的。
如果你手头也有一堆小图，想要快速搞出 可复用的 CSS，可以试试 npm install smallpic-2-css --save。别忘了路径别写错，不然找不到图片就白跑一趟了～
文件大小：105.73KB
评论区