/sprite-loader

sprite loader module for webpack

Primary LanguageJavaScript

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;
 }