什么是精灵图、雪碧图？


css-sprite 是通过多张图标放到同一图层，然后通过 css 背景定位技术来设置背景图。

自行生成

会 photoshop 的同学，可以自行在该工具中创建图层，将多张图片（一般指小图标）放到同意图层。

在线生成 （第三方）

通过 css-sprite 等在线网站，上传图标，在线生成 image、css、html

  • 打开浏览器输入网站 （或者点 👆 面链接）

构建工具生成

本文使用 webpack 构建工具生成

1
npm i --save webpack-spritesmith

vue.config.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
const path = require("path");
const SpritesmithPlugin = require("webpack-spritesmith");

module.exports = {
  configureWebpack: {
    plugins: [
      new SpritesmithPlugin({
        src: {
          cwd: path.resolve(__dirname, "static/icons"),
          glob: "*.png",
        },
        target: {
          image: path.resolve(
            __dirname,
            "src/components/nav/assets/nav_sprite.png"
          ),
          css: path.resolve(
            __dirname,
            "src/components/nav/assets/nav_sprite.css"
          ),
        },
        apiOptions: {
          cssImageRef: "'./nav_sprite.png'",
        },
      }),
    ],
  },
};