youzan / Sprite Loader
A image sprite loader for webpack.
Stars: ✭ 82
Programming Languages
javascript
184084 projects - #8 most used programming language
Labels
Projects that are alternatives of or similar to Sprite Loader
Thread Loader
Runs the following loaders in a worker pool
Stars: ✭ 945 (+1052.44%)
Mutual labels: webpack-loader
Svg Sprite Webpack Plugin
Webpack plugin for loading/extracting SVGs into a sprite file
Stars: ✭ 73 (-10.98%)
Mutual labels: webpack-loader
Isomorphine
Require server-side modules from the browser, remotely.
Stars: ✭ 66 (-19.51%)
Mutual labels: webpack-loader
Vanilla Css
A minimal baseline stylesheet for any web project
Stars: ✭ 53 (-35.37%)
Mutual labels: stylesheet
Jshint Loader
[DEPRECATED] jshint loader for webpack, please migrate on `eslint`
Stars: ✭ 69 (-15.85%)
Mutual labels: webpack-loader
Bootstrap Loader
Load Bootstrap styles and scripts in your Webpack bundle
Stars: ✭ 1,038 (+1165.85%)
Mutual labels: webpack-loader
Ng Router Loader
Webpack loader for NgModule lazy loading using the angular router
Stars: ✭ 47 (-42.68%)
Mutual labels: webpack-loader
Extracted Loader
It reloads extracted stylesheets extracted with ExtractTextPlugin
Stars: ✭ 67 (-18.29%)
Mutual labels: stylesheet
Graphql Persisted Document Loader
Webpack loader that adds a documentId to a compiled graphql document, which can be used when persisting/retrieving documents
Stars: ✭ 74 (-9.76%)
Mutual labels: webpack-loader
Motif
Lightweight and customizable stylesheets for iOS
Stars: ✭ 879 (+971.95%)
Mutual labels: stylesheet
Laravel Localization Loader
Laravel Localization loader for webpack. Convert Laravel Translation strings to JavaScript Objects.
Stars: ✭ 58 (-29.27%)
Mutual labels: webpack-loader
Vue Md Loader
✨ Markdown files to ALIVE Vue components.
Stars: ✭ 78 (-4.88%)
Mutual labels: webpack-loader
Svg Fill Loader
DEPRECATED, use https://github.com/kisenka/svg-mixer/tree/master/packages/svg-transform-loader instead
Stars: ✭ 74 (-9.76%)
Mutual labels: webpack-loader
Sketch Loader
Webpack loader for Sketch (+43) files
Stars: ✭ 69 (-15.85%)
Mutual labels: webpack-loader
sprite-loader
Introduction
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:
-
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;}
-
Image url that contain #spriteignore string.
/* ignore all images that contain #spriteignore */ .bg3{background: url(3.png#spriteignore);}
Licence
MIT
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].