A webpack sprite loader that generates spritesheets based on your stylesheets.
install the loader:
npm i webpack-sprite-loader -Dconfigure the webpack:
const webpack-sprite-loader = require('webpack-sprite-loader')
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader',
'webpack-sprite-loader'
]
}
]
}
}write css like this:
div.bgc1 {
/* add '?__sprite' flag after each image url */
background: url('./src/test1.png?__sprite')
}
div.bgc2 {
background: url('./src/test2.png?__sprite')
}What you get finally is:
div.bgc1 {
background: url('./sprite.png');
background-position: 0 -895px;
}
div.bgc2 {
background: url('./sprite.png');
background-position: 0 0;
}