css精灵图和React中使用 webpack-spritesmith 插件

CSS Sprites

CSS Sprites叫
CSS精灵或者雪碧图，是一种网页图片应用处理方式。顾名思义，它是将许多像精灵一样的背景图片合成一张图片，并且使用CSS的"background-image"，“background-repeat”，"background-position"的组合进行背景定位，展现出对应位置的图片。

为什么要使用CSS Sprites

CSS Sprites技术不是为了减少质量，而是减少请求个数。所谓精灵图就是把许多小图片合并成一张大图

优点：
1.首次加载页面的时候，就不用加载所有的小图片，只需要加载合起来的大图就可。
2.减少 HTTP 请求数，极大地提高页面加载速度增加图片信息重复度，提高压缩比，减少图片大小
3.更换风格方便，只需在一张或几张图片上修改颜色或样式即可实现

缺点：
1.需要留足够的空间，防止出现不必要的背景
2.图片合并麻烦维护麻烦，修改一个图片可能需要从新布局整个图片，样式等解决方案：
3.在自适应页面，如果图片宽高不够，会出现背景断裂

如何使用

1.引入精灵图 css

  .div {
        width: 200px;
        height: 300px;
      }
      span {
        display: inline-block;
        width: 20px;
        height: 20px;
        border: 1px solid #ccc;
        background-image: url(../sprtie.png);
        background-repeat: no-repeat;
      }
      //定位坐标
      .icon1 {
        background-position: 0 0;
      }
      .icon2 {
        background-position: 5px -23px;
      }
      .icon3 {
        background-position: -48px -198px;
      }

html

  <div class="div">
      <span class="icon1"></span>
      <span class="icon2"></span>
      <span class="icon3"></span>
    </div>

精灵图素材(某网页上的)

效果图

如果需要某一张图片，通过background-position找到它对应的位置就可以啦！

使用 webpack-spritesmith 插件

正常书写 css 文件，在项目中的 webpack 配置文件中引入 css-sprite 插件后，会自动测量的 每一个
图标的大小、位置，生成对应的css 文件

1.安装插件 npm i -D webpack-spritesmith

2.在config-overrides.js文件中引入配置

// 雪碧图生成的插件
// 如果想生成jpeg格式的图片 就把以下所有png改为jpeg即可
const SpritesmithPlugin = require('webpack-spritesmith')
plugins: [
new SpritesmithPlugin({
  // 目标小图标，这里就是你要生成的图片的目录
  src: {
  //小图标路径
    cwd: path.resolve(__dirname, "./src/assets/images/icons"),
    //小图标的文件后缀名
    glob: "*.png",
  },
  // 输出雪碧图文件及样式文件，这个是打包后，自动生成的雪碧图和样式，自己配置想生成去哪里就去哪里
  target: {
  //生成雪碧图 文件存放路径
    image: path.resolve(__dirname, "./dist/sprites/sprite.png"),
    //对应样式文件 存放路径
    css: path.resolve(__dirname, "./dist/sprites/sprite.css"),
  },
  // 样式文件中调用雪碧图地址写法
  apiOptions: {
    cssImageRef: "../sprites/sprite.png",
  },
  spritesmithOptions: {
    algorithm: "top-down",//从上到下方向
    padding:3//每个小图标之间的间隙
  },
});
]

配置完成之后 在需要的页面引入新生成的less 或css文件

sprite下的less 自动生成的效果

/*
LESS variables are information about icon's compiled state, stored under its original file name

.icon-home {
  width: @icon-home-width;
}

The large array-like variables contain all information about a single icon
@icon-home: x y offset_x offset_y width height total_width total_height image_path name;

At the bottom of this section, we provide information about the spritesheet itself
@spritesheet: width height image @spritesheet-sprites;
*/

//1、2、3、4、5是我本地图片的名称。。。
@1-name: '1';
@1-x: 211px;
@1-y: 223px;
@1-offset-x: -211px;
@1-offset-y: -223px;
@1-width: 196px;
@1-height: 198px;
@1-total-width: 716px;
@1-total-height: 421px;
@1-image: 'sprite.jpeg';
@1: 211px 223px -211px -223px 196px 198px 716px 421px 'sprite.jpeg' '1';
@2-name: '2';
@2-x: 521px;
@2-y: 0px;
@2-offset-x: -521px;
@2-offset-y: 0px;
@2-width: 195px;
@2-height: 198px;
@2-total-width: 716px;
@2-total-height: 421px;
@2-image: 'sprite.jpeg';
@2: 521px 0px -521px 0px 195px 198px 716px 421px 'sprite.jpeg' '2';
@3-name: '3';
@3-x: 0px;
@3-y: 0px;
@3-offset-x: 0px;
@3-offset-y: 0px;
@3-width: 309px;
@3-height: 223px;
@3-total-width: 716px;
@3-total-height: 421px;
@3-image: 'sprite.jpeg';
@3: 0px 0px 0px 0px 309px 223px 716px 421px 'sprite.jpeg' '3';
@4-name: '4';
@4-x: 309px;
@4-y: 0px;
@4-offset-x: -309px;
@4-offset-y: 0px;
@4-width: 212px;
@4-height: 212px;
@4-total-width: 716px;
@4-total-height: 421px;
@4-image: 'sprite.jpeg';
@4: 309px 0px -309px 0px 212px 212px 716px 421px 'sprite.jpeg' '4';
@5-name: '5';
@5-x: 0px;
@5-y: 223px;
@5-offset-x: 0px;
@5-offset-y: -223px;
@5-width: 211px;
@5-height: 198px;
@5-total-width: 716px;
@5-total-height: 421px;
@5-image: 'sprite.jpeg';
@5: 0px 223px 0px -223px 211px 198px 716px 421px 'sprite.jpeg' '5';
@spritesheet-width: 716px;
@spritesheet-height: 421px;
@spritesheet-image: 'sprite.jpeg';
@spritesheet-sprites: @1 @2 @3 @4 @5;
@spritesheet: 716px 421px 'sprite.jpeg' @spritesheet-sprites;

/*
The provided classes are intended to be used with the array-like variables

.icon-home {
  .sprite-width(@icon-home);
}
.icon-email {
  .sprite(@icon-email);
}

Example usage in HTML:

`display: block` sprite:
<div class="icon-home"></div>

To change `display` (e.g. `display: inline-block;`), we suggest using a common CSS class:

// CSS
.icon {
  display: inline-block;
}

// HTML
<i class="icon icon-home"></i>
*/
.sprite-width(@sprite) {
  width: extract(@sprite, 5);
}

.sprite-height(@sprite) {
  height: extract(@sprite, 6);
}

.sprite-position(@sprite) {
  @sprite-offset-x: extract(@sprite, 3);
  @sprite-offset-y: extract(@sprite, 4);
  background-position: @sprite-offset-x @sprite-offset-y;
}

.sprite-image(@sprite) {
  @sprite-image: extract(@sprite, 9);
  background-image: e(%('url(%a)', e(@sprite-image)));
}

//当我们需要用到精灵图定位的时候 就需要这个表达式去执行
// 此处的 sprite 为 图片的名称 就可以直接调用
.sprite(@sprite) {
  .sprite-image(@sprite);
  .sprite-position(@sprite);
  .sprite-width(@sprite);
  .sprite-height(@sprite);
}

/*
The `.sprites` mixin generates identical output to the CSS template
  but can be overridden inside of LESS

This must be run when you have at least 2 sprites.
  If run with a single sprite, then there will be reference errors.

.sprites(@spritesheet-sprites);
*/
.sprites(@sprites, @i: 1) when (@i <= length(@sprites)) {
  @sprite: extract(@sprites, @i);
  @sprite-name: e(extract(@sprite, 10));
  .@{sprite-name} {
    .sprite(@sprite);
  }
  .sprites(@sprites, @i + 1);
}

页面使用 html

   		<div>
            <span className="span1"></span>
            <span className="span2"></span>
          </div>

index.css

//此处引用的是sprite下自动生成的less 文件
@import '../../assets/sprite/sprite.less';

.span1 {
  display: block;
  background-color: antiquewhite;
  //此处调用sprite的方法 可以直接获取当前图片的定位，方法是内部自己处理好的不需要自己去定位
  //1为当前图片的名称 使用时加一个@
  .sprite(@1);
}
.span2 {
  display: block;
  background-color: antiquewhite;
  .sprite(@2);
}

最后 npm run bulid 整个使用过程就完成了