feflow/sprite-loader

sprite loader module for webpack

sprites-loader

Install

npm install --save-dev sprites-loader

Usage

file.css

  .image {
    background-image: url("./assets/images/example.png?__sprite");
}

file.js

import css from 'file.css';

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [ 'style-loader', 'css-loader', 'sprites-loader', 'less-loader' ]
      }
    ]
  }
}

Options

Name	Type	Default	Description
name	{String}	sprite-[hash:6].png	Configure a custom filename template for your file
context	{String}	this.options.context	Configure a custom file context, defaults to webpack.config.js context
outputPath	{String|Function}	Original images path	Configure a custom output path for your files
padding	{Number}	2px	padding between images

you can set css property width and height, the sprite's background-size will be set according to the css property width and height, the first value of background-size property is (width/imageWidth) * spriteWidth, the second value of background-size property calculate as same the the second value. if you not set width and height, the element will set width and height to image's width and height.

Here's an example how to use sprites-loader css code

div {
    background-image: url('./img/love.png?__sprite')
}

p {
    margin: 0;
    width: 32px;
    height: 32px;
    background: no-repeat url('./img/love-heart.png?__sprite');
}

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [ 'style-loader', 'css-loader', 'sprites-loader', 'less-loader' ]
      }
    ]
  }
}

output

div {
  background-image: url("img/sprite-6c7333.png");background-size:400px 200px;
background-position:-0px -0px;
width:200px;
height:200px;
 }

a {
  margin: 0;
  width: 32px;
  height: 32px;
  background: no-repeat url("img/sprite-6c7333.png");background-size:64px 32px;
background-position:-32px -0px;
 }