https://github.com/cjg125/postcss-sprite

postcss sprite 插件
https://github.com/cjg125/postcss-sprite

postcss postcss-plugins sprite sprites

Last synced: about 1 month ago
JSON representation

postcss sprite 插件

• Host: GitHub
• URL: https://github.com/cjg125/postcss-sprite
• Owner: cjg125
• Created: 2017-02-06T12:05:39.000Z (almost 8 years ago)
• Default Branch: master
• Last Pushed: 2022-12-09T08:14:22.000Z (about 2 years ago)
• Last Synced: 2024-04-14T12:09:14.425Z (9 months ago)
• Topics: postcss, postcss-plugins, sprite, sprites
• Language: JavaScript
• Homepage: https://www.npmjs.com/package/postcss-sprite
• Size: 9.68 MB
• Stars: 3
• Watchers: 2
• Forks: 1
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# postcss sprite 插件

## 简介

![image](https://github.com/cjg125/postcss-sprite/raw/master/sprite.gif)

## 环境准备

> nodejs >= 8.0.0

## 安装

```bash

$ yarn add postcss-sprite -D

```

## 使用

- ### webpack

  [https://github.com/postcss/postcss#webpack](https://github.com/postcss/postcss#webpack)

## API

- baseSize

  - 图片如果以 ([email protected], [email protected], [email protected]) 命名则 通过 baseSize 转换 为 rem 单位

  - 默认 16

- input

  - 以该值为相对目录查找图片合并

  - 默认 "./"

- output

  - 生成精灵图的路径

  - 默认 "./"

- filename

  - 生成精灵图的名称

  - 默认 "sprite.png"

- revision

  - 以 sprite 图片的 md5 生成版本号

  - 默认值 true

- spritesmithOptions

  - [spritesmith](https://github.com/Ensighten/spritesmith#spritesheetprocessimagesimages-options)

- filter

  - 默认值 (url) => true

  - 如果返回 false 当前图片 url 不进行 sprite 操作

- publicPath: string: '' function

  - string 设置图片前缀

  - funciton

    ```js

    publicPath = opts => {

      let { dirname, filename } = opts;

      return join(dirname, filename);

    };

    ```

## 更新记录

- v3.0.0 (2019-08-28)

  - 删除 replaceUrl 添加 publicPath

  - source 改成 input

- v2.2.1 (2017-06-22)

  - 添加正确的 package.json engines 选项

- v2.2.0 (2017-06-20)

  - 参数 file -> filename

  - 修复没有图片合并时会生成一个空图片

- v2.1.0 (2017-06-19)

  - 添加 revision 选项,默认支持以 sprite 图片的 md5 值做版本号

- v2.0.0 (2017-06-19)

  - 完美支持开发环境与发布环境的 rem 支持

  - 需要 nodejs>=8.0.0 (用到了 promisify)

  - 不兼容 1.x.x 版本

  - 需要 background-image 来声明 不支持 background 简写

- v1.5.0 (2017-06-15)

  - 自动删除开发环境设置的 width height background-size

- v1.4.0 (2017-05-25)

  - 支持移动端的 background-size 图片命名 [email protected] [email protected]

  - 支持 rem 单位 设置 baseSize 参数

  - 默认添加宽高到生成的 css 里