# msprite-loader

> webpack sprites loader

Latest version **0.1.0** (published 2018-07-03) · MIT license · 0 weekly downloads

## Install

```sh
npm install msprite-loader
pnpm add msprite-loader
yarn add msprite-loader
bun add msprite-loader
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.0 |
| Published | 2018-07-03 |
| First published | 2018-07-03 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 8.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | winnieBear |
| Maintainers | winniebear |
| Keywords | msprite-loader, webpack, sprite, webpack-sprite |

## Links

- npm: https://www.npmjs.com/package/msprite-loader
- npm.io page: https://npm.io/package/msprite-loader

## Dependencies (3)

- [mkdirp](https://npm.io/package/mkdirp.md) ^0.5.1
- [spritesmith](https://npm.io/package/spritesmith.md) ^3.2.1
- [loader-utils](https://npm.io/package/loader-utils.md) ^1.1.0

## Alternatives

- [raw-loader](https://npm.io/package/raw-loader.md) — 4.3M weekly downloads
- [plop](https://npm.io/package/plop.md) — 1.4M weekly downloads
- [webpack-deadcode-plugin](https://npm.io/package/webpack-deadcode-plugin.md) — 80.3K weekly downloads
- [@storybook/preact-vite](https://npm.io/package/@storybook/preact-vite.md) — 54.2K weekly downloads
- [vite-plugin-transform](https://npm.io/package/vite-plugin-transform.md) — 2.4K weekly downloads

## Recent versions

- 0.1.0 (latest) — 2018-07-03

## README

msprite-loader
___
## 说明
this plugin be based on isprite-loader.

基于isprite-loader，修改了原插件的几个问题。
1. windows 下分隔符问题
2. 重新修改的css中background-position属性不对
3. 合成图片过程时好时坏，把异步操作改成串行操作，修复问题

## 使用方法
webpack配置方法
````js
module:{
      rules:[
          {
              test:/\.(scss|css)$/,
              use: ExtractTextPlugin.extract({
                fallback: "style-loader",
                publicPath: '../../',
                use: [{
                  loader:'css-loader'
                },{
                  loader:'msprite-loader',
                  options:{
                    outputPath:'./src/assets/img/',
                    scale:0.3333333 //如果提供的icon是3倍图，合成之后的图片样式会乘以0.33333，默认是1
                  }
                },{
                  loader:'sass-loader'
                }],
              })
          },
      ]
}
````

源文件
````css
.weibo {
    background-image: url("../assets/sprite/login/weibo.png?_sprite"); /*图片是48px*48px*/
}
````


合成之后样式

````css
.container-foo .weibo {
  background-image: url(/img/login.png); /*login.png是合成后的图片*/
}
.container-foo .qq,
.container-foo .weibo {
  background-size: 16px 84px;
  width: 16px;
  height: 16px;
}
````

---
_Source: https://npm.io/package/msprite-loader · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._