sprite-loader 自动生成精灵图工具 - 文章教程

sprite-loader 自动生成精灵图工具

发布于 2021-09-20 字数 1864 浏览 918 评论 0

sprite-loader 是一款自动精灵图工具,帮你省去手动制作精灵图的麻烦。

安装

npm install sprite-loader --save

配置

在 webpack 配置文件添加 sprite-loader 配置。

// 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']
  }
]

使用

1.基本用法

请在样式文件添加 sprite-loader-enable 注释以启用合并,之后 sprite-loader 便会识别图片并生成精灵图。

/* sprite-loader-enable */
.flip_flops {
  width: 16px;
  height: 16px;
  background: url(./img/flip_flops@2x.png);
}
.tram {
  width: 50px;
  height: 50px;
  background: url(./img/tram@2x.png);
}
.pie {
  width: 100px;
  height: 100px;
  background: url(./img/pie@2x.png);
}

2.适配Retina屏

Retina 屏适配非常简单,你只需将图片存为2倍大小,且命名为 xxx@2x.png。sprite-loader 将会自动生成 1x 图和 media query。

3.禁用合并

sprite-loader 会收集样式文件中所有的 background,background-image 属性的图片进行合并,但以下几种情况除外。

1、设置了 background-position,background-size 的图片。

/* 忽略有background-position的图片 */
.bg1{background: url(1.png) no-repeat -10px -10px;}
/* 忽略有background-size的图片 */
.bg2{background: url(2.png); background-size: 10px 10px;}

2、url 带 #spriteignore 参数的图片。

/* 忽略有#spriteignore的图片 */
.bg3{background: url(3.png#spriteignore);}

项目地址:https://github.com/youzan/sprite-loader

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2512 文章
30 评论
82839 人气
更多

推荐作者

qianbiandeboy

文章 0 评论 0

少女净妖师

文章 2 评论 0

zangqw

文章 0 评论 0

qq_7HKsl

文章 0 评论 0

伪装你

文章 1 评论 0