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

sprite-loader's Issues

雪碧图希望支持整个项目的维度的分组合图功能

line-height cause the wrong background-size

 "(width|height)\\s*:\\s*([0-9\\.]+px)": handleWidthOrHeight,

Combine sprites from different folder to single file

Hello!
I have several directories with css files and images for them, then I include them to the single css file. In this case I get a separate sprite for each directory. Is it possible to get common sprite for all of them?