引用
const SpritesmithPlugin = require("webpack-spritesmith")
webpack.config 配置
plugins: [
new SpritesmithPlugin({
src: {
cwd: path.resolve(__dirname, 'src/assets/icon'), // 多个图片所在的目录
glob: '*.png' // 匹配图片的路径
},
target: {
// 生成最终图片的路径
image: path.resolve(__dirname, 'src/assets/sprite.png'),
// 生成所需 SASS/LESS/Stylus mixins 代码，我们使用 Stylus 预处理器做例子
css: path.resolve(__dirname, 'src/assets/sprite.css'),
},
apiOptions: {
cssImageRef: "~sprite.png"
},
}),
]
生成的CSS
.icon-bubble {
background-image: url('../assets/sprite.png'); // 需要更改路径
background-position: 0px 0px;
width: 306px;
height: 306px;
}
.icon-next_no {
background-image: url('../assets/sprite.png');
background-position: -306px 0px;
width: 27px;
height: 45px;
}
HTML调用
<div class="icon-bubble">/div>
