youzan/sprite-loader

Name: sprite-loader

Owner: ??

Description: A image sprite loader for webpack.

Created: 2017-02-10 04:03:44.0

Updated: 2018-05-15 10:37:26.0

Pushed: 2018-04-20 03:43:03.0

Homepage:

Size: 4790

Language: JavaScript

GitHub Committers

User	Most Recent Commit	# Commits

Other Committers

User	Email	Most Recent Commit	# Commits

README

sprite-loader

Introduction

???

sprite-loader is an image sprite generate tool.It helps you to resolve the troublesome of make sprite manually.

Installation

install sprite-loader --save

Configuration

or webpack 1
ers: [
{
    test: /\.css/,
    loader: 'style!css!sprite'
},
{
    test: /\.scss$/,
    loader: 'style!css!sprite!sass'
}


or webpack 2
s: [
{
    test: /\.css/,
    use: ['style-loader', 'css-loader', 'sprite-loader']
},
{
    test: /\.scss$/,
    use: ['style-loader', 'css-loader', 'sprite-loader', 'sass-loader']
}

Usage

1.Basic Usage

First of all, add a comment in the first line of the file to enable sprite-loader.Then the loader will identify images and make sprites.

prite-loader-enable */
p_flops {
width: 16px;
height: 16px;
background: url(./img/flip_flops@2x.png);

m {
width: 50px;
height: 50px;
background: url(./img/tram@2x.png);

 {
width: 100px;
height: 100px;
background: url(./img/pie@2x.png);

2.Adapt Retina Screen

It's very easy to adapt Retina screen. You just need to use double size images and name them as xxx@2x.png. sprite-loader will generate 1x images and media query automatically.

3.Disable Combination

sprite-loader will collect all the background and background-image attributes in css files to combine. Except for following circumstance:

1. Images that set the background-position and background-size.

   gnore images that set background-position */
   {background: url(1.png) no-repeat -10px -10px;}
   gnore images that set background-size? */
   {background: url(2.png); background-size: 10px 10px;}
   

2. Image url that contain #spriteignore string.

   gnore all images that contain #spriteignore */
   {background: url(3.png#spriteignore);}
   

Licence

MIT