# css 雪碧图 使用**webpack-spritesmith**可以将所有的icon小图标整合成一张图片。 每次都只会请求一次，同时还能自动生成定位样式，对于都是同尺寸的小图标，直接可以使用。 ## 1-1. 安装插件 `npm install webpack-spritesmith --save` ## 1-2. vue.config.js 配置 ~~~ const path = require('path') const SpritesmithPlugin = require('webpack-spritesmith'); // **************************************************** var templateFunction = function (data) { var shared = '.icon { background-image: url(I);background-size: Wpx Hpx;}' .replace('I', data.sprites[0].image) .replace('W', data.spritesheet.width).replace('H', data.spritesheet.height) var perSprite = data.sprites.map(function (sprite) { return '.icon-N { width: Wpx; height: Hpx; background-position: Xpx Ypx; }' .replace('N', sprite.name) .replace('W', sprite.width).replace('H', sprite.height) .replace('X', sprite.offset_x).replace('Y', sprite.offset_y); }).join('\n'); return shared + '\n' + perSprite; }; // **************************************************** module.exports = { configureWebpack: config => { config.resolve.modules = ['node_modules', './src/assets/images'] const Plugins = [ new SpritesmithPlugin({ src: { // 小图标路径 cwd: path.resolve(__dirname, './src/assets/icon'), // 匹配小图标文件后缀名 glob: '*.png' }, target: { // 生成雪碧图(大图)文件存放路径 image: path.resolve(__dirname, './src/assets/images/sprite.png'), // 对应的样式文件存放路径 css: [ [path.resolve(__dirname, './src/assets/css/sprite.scss'), { format: 'function_based_template' }], ] }, // 自定义模板入口，我们需要基本的修改webapck生成的样式，上面的大函数就是我们修改的模板 customTemplates: { 'function_based_template': templateFunction }, // 样式文件中调用雪碧图地址写法 apiOptions: { cssImageRef: '~sprite.png' }, // 让合成的每个图片有一定的距离， spritesmithOptions: { padding: 20 } }) ] // config里面，覆盖掉以前的，要不然不好使 config.plugins = [...config.plugins, ...Plugins] } } ~~~ ## 1-3. 使用 * 重新npm run serve以后。会在你配置的文件 里面生成合成图sprite.png 和 sprite.css ~~~ .icon-Snip20190227_108 { background-image: url(../sprites/sprite.png); background-position: 0px 0px; width: 55px; height: 55px; } .icon-Snip20190227_109 { background-image: url(../sprites/sprite.png); background-position: 0px -57px; width: 69px; height: 66px; } ~~~ * 在sprite.css里面已经通过webpack的机制，引入了sprite.png， 所以组件里面直接在style部分直接@import'../xx/sprite/.css'就可以了；或者 在main.js中引入 import './xxxsprite.css' * `<span class="icon icon-小图名字 自定义名字"></span>`