https://github.com/feflow/sprite-loader
sprite loader module for webpack
https://github.com/feflow/sprite-loader
Last synced: about 1 year ago
JSON representation
sprite loader module for webpack
- Host: GitHub
- URL: https://github.com/feflow/sprite-loader
- Owner: feflow
- Created: 2018-01-10T12:17:10.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2018-07-04T08:13:38.000Z (almost 8 years ago)
- Last Synced: 2025-04-18T13:33:13.320Z (about 1 year ago)
- Language: JavaScript
- Size: 49.8 KB
- Stars: 8
- Watchers: 11
- Forks: 2
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
sprites-loader
Install
```bash
npm install --save-dev sprites-loader
```
Usage
**file.css**
```css
.image {
background-image: url("./assets/images/example.png?__sprite");
}
```
**file.js**
```js
import css from 'file.css';
```
**webpack.config.js**
```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](https://webpack.js.org/configuration/entry-context/#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**
```scss
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**
```js
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: [ 'style-loader', 'css-loader', 'sprites-loader', 'less-loader' ]
}
]
}
}
```
**output**
```css
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;
}
```