雪碧图也叫CSS精灵， 是一CSS图像合成技术，这里介绍webpack实现雪碧图
项目目录.jpg
- 安装webpack-sprites
npm install --save-dev webpack-sprites
cnpm i -D webpack-sprites
yarn add -D webpack-sprites
- webpack.dev.conf.js
const SpritesmithPlugin = require('webpack-spritesmith');
new SpritesmithPlugin({
// 目标小图标
src: {
cwd: path.resolve(__dirname, '../static/img/project'),
glob: '*.png'
},
// 输出雪碧图文件及样式文件
target: {
image: path.resolve(__dirname, '../static/img/sprites/sprite.png'),
css: path.resolve(__dirname, '../static/css/sprite.css')
},
// 样式文件中调用雪碧图地址写法
apiOptions: {
cssImageRef: '/static/img/sprites/sprite.png'
},
spritesmithOptions: {
algorithm: 'top-down'
}
}),
配置.jpg
- 执行打包指令或者实时构建指令
npm run dev / webpack
- 在index.html文件中引入sprite.css文件
<link rel="stylesheet" type="text/css" href="../static/css/sprite.css" />
- 在项目中引入图标
这个依赖的实现原理是：将需要合图的图片文件夹指定好，将所有需要合图安装图片文件名生成对应的css样式。需要去生成的sprite.css文件中查找需要引入的对应图片文件。
class使用.jpg
webpack-sprites的使用问题
- 如何配置rem单位
由于正个站点是但页面应用，统一使用的 rem, 而生成的sprit.css是为 px为单位，面临如何配置rem单位的问题。
- sprite.css有其它的引入方法吗
目前尝试了官网的引入方式，和index.html的引入方式，都不太理想。
