https://github.com/youzan/sprite-loader
A image sprite loader for webpack.
https://github.com/youzan/sprite-loader
image-sprite javascript sprite stylesheet webpack-loader
Last synced: 8 days ago
JSON representation
A image sprite loader for webpack.
- Host: GitHub
- URL: https://github.com/youzan/sprite-loader
- Owner: youzan
- Created: 2017-02-10T04:03:44.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2018-04-20T03:43:03.000Z (about 7 years ago)
- Last Synced: 2025-04-15T01:07:40.585Z (8 days ago)
- Topics: image-sprite, javascript, sprite, stylesheet, webpack-loader
- Language: JavaScript
- Homepage:
- Size: 4.57 MB
- Stars: 83
- Watchers: 7
- Forks: 16
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
sprite-loader
## Introduction
[中文版](https://github.com/youzan/sprite-loader/blob/master/README_ZH.md)
sprite-loader is an image sprite generate tool.It helps you to resolve the troublesome of make sprite manually.
## Installation
```
npm install sprite-loader --save
```
## Configuration
```
// for webpack 1
loaders: [
{
test: /\.css/,
loader: 'style!css!sprite'
},
{
test: /\.scss$/,
loader: 'style!css!sprite!sass'
}
]
// for webpack 2
rules: [
{
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.
```
/* sprite-loader-enable */
.flip_flops {
width: 16px;
height: 16px;
background: url(./img/[email protected]);
}
.tram {
width: 50px;
height: 50px;
background: url(./img/[email protected]);
}
.pie {
width: 100px;
height: 100px;
background: url(./img/[email protected]);
}
```
### 2.Adapt Retina Screen
It's very easy to adapt Retina screen. You just need to use double size images and name them as [email protected]. 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.
```
/* ignore images that set background-position */
.bg1{background: url(1.png) no-repeat -10px -10px;}
/* ignore images that set background-size的 */
.bg2{background: url(2.png); background-size: 10px 10px;}
```
2. Image url that contain #spriteignore string.
```
/* ignore all images that contain #spriteignore */
.bg3{background: url(3.png#spriteignore);}
```
## Licence
MIT