使用Vue + 雪碧图（CSS sprite），webpack-spritesmith

时间 2019-11-16

标签使用 vue 雪碧 css sprite webpack spritesmith 栏目 CSS 繁體版

原文原文链接

开发了将近两年的小程序，一直默默的在小程序迭代中。好久没有玩过Vue, 最近有个新的项目用上了Vue, 看到Ui图小图标太多了, 立刻想着要用雪碧图, 啪啦啪啦的找雪碧图合成方法css

最后给你们推荐webpack-spritesmith ，这是一个融合node的生成css + 雪碧图（CSS sprite）排版的工具, 能够导入css以后，利用标签像iconfont同样调用便可，比较的方便vue

github: github.com/mixtur/webp…node

前言：能够自定义设置样式模板，以后能够自定义标签，无论是stylus / scss / less / css 都能定义python

1. 什么都不要说了，安装吧~

npm i spritesheet-templates --save-dev
复制代码

2. 先批量重命名图片

为何？整齐好看，就像阅兵仪式同样，其实按顺序排列，是方便你css表找更好webpack

3. 有零零碎碎的图标库后，就开始配置webpack

目录结构

# 依据使用说明
/
|-src
| |-icons
| | |-icon_01.png
| | |-icon_02.png
| | |-icon_03.png
| | ...
| |-style.styl
| ...
|- webpack.config.js
复制代码

通用配置

var path = require('path');
var SpritesmithPlugin = require('webpack-spritesmith');
module.exports = {
    // ...
 module: { rules: [ {test: /\.styl$/, use: [ 'style-loader', 'css-loader', 'stylus-loader' ]}, {test: /\.png$/, use: [ 'file-loader?name=i/[hash].[ext]' ]} ] }, resolve: { modules: ["node_modules", "spritesmith-generated"] }, plugins: [ new SpritesmithPlugin({ src: { cwd: path.resolve(__dirname, 'src/icons'), #图标所在的位置 glob: '*.png' #图标的格式 }, target: { #建议这两个文件放一块儿 image: path.resolve(__dirname, 'src/spritesmith-generated/sprite.png'), #生成指定位置的雪碧图 css: path.resolve(__dirname, 'src/spritesmith-generated/sprite.[styl|css|stylus|scss|less]'),&emsp;#生成指定位置样式表,会对应雪碧图全部的背景偏移位置 }, apiOptions: { #针对上面生成的样式表的相对路径sprite.[styl|css|stylus|scss|less] cssImageRef: "./sprite.png" } }) ] // ... }; 复制代码

自定义样式模板

第二种配置方式，通用，这种自定义样式模板git

# 除法精度问题
function divide (arg1, arg2) {
    console.log(arg1, arg2)
    var t1 = 0; var t2 = 0; var r1; var  r2
    try { t1 = arg1.toString().split('.')[1].length } catch (e) {}   // --小数点后的长度
    try { t2 = arg2.toString().split('.')[1].length } catch (e) {}  // --小数点后的长度
    r1 = Number(arg1.toString().replace('.', ''))  // --去除小数点变整数
    r2 = Number(arg2.toString().replace('.', ''))  // --去除小数点变整数
    return (r1 / r2) * Math.pow(10, t2 - t1)   // ---整数相除 在乘上10的平方  小数点的长度
}
 
 # 函数自定义样式表方法
 #须要特地说明：&emsp;若是你的
 function templateFunction(data) {
    var spritesheet = data.spritesheet # 精灵图对象
    var unit = 'px' # 单位
    var w = spritesheet.width # 精灵图宽
    var h  = spritesheet.height # 精灵图高
    var shared = `.ico { 
          background-image: url(${spritesheet.image});
          background-size: ${w}${unit} ${h}${unit} 
    }`
    
    #循环雪碧图而且设置对应图标样式的宽度与高度
    # data.sprites: 精灵图小图标遍历
    var perSprite = data.sprites.map(function (sprite) {
        var offsetX = sprite.offset_x # 距离左上角的x轴距离, 这里为负数，已经默认算好
        var offsetY = sprite.offset_y # 距离左上角的y轴距离, 这里为负数，已经默认算好
        # 须要return出去，而且返回一个默认样式，由于到了rem会有一些误差，因此须要设置padding:1px
        return `.ico-N {position:relative; top: 2${unit};padding: 1${unit}; width: ${sprite.width}${unit}; height: ${sprite.width}${unit}; background-position: X${unit} Y${unit}; display: inline-block;}`
            .replace('N', sprite.name)
            .replace('X', offsetX)
            .replace('Y', offsetY)
    }).join('\n')

    return shared + '\n' + perSprite
}



module.exports = {
        ...
        plugins: [
            new SpritesmithPlugin({
                src: {
                    cwd: path.resolve(__dirname, 'src/icons'), #图标所在的位置
                    glob: '*.png' #图标的格式
                },
                target: {
                    image: path.resolve(__dirname, 'src/spritesmith-generated/sprite.png'), #生成指定位置的雪碧图
                    css: [
                        # 引入样式模板
                        [path.resolve(__dirname, 'src/spritesmith-generated/sprite.[styl|css|stylus|scss|less]'), {
                            format: 'function_based_template' #这里的样式模板经过customTemplates指定
                        }]
                    ]
                },
                apiOptions: {
                    cssImageRef: './sprite.png'
                },
                customTemplates: {
                    'function_based_template':  templateFunction, # 指定样式模板，这里能够是函数，能够是handlebars后台模板
                },
                spritesmithOptions: {
                    #针对上面生成的样式表的相对路径sprite.[styl|css|stylus|scss|less]
                    algorithm: 'top-down', # 从上到下排列雪碧图
                    padding: 20, # 雪碧图的间距
                }
            })
        ]
}
复制代码

4. 在标签中使用

打开你的图标看看相应须要的图标名称
复制你须要图标的名称，打开刚才生成的sprite.[styl|css|stylus|scss|less]
引入sprite.[styl|css|stylus|scss|less]到src/main.js，主目录下例如：
在.vue - template 中使用

<div class="ico ico-icon_14"></div>
    <div class="ico ico-icon_13"></div>
    <div class="ico ico-icon_16"></div>
    <div class="ico ico-icon_17"></div>
    <div class="ico ico-icon_18"></div>
    <div class="ico ico-icon_19"></div>
    <div class="ico ico-icon_20"></div>
    <div class="ico ico-icon_21"></div>
复制代码

这里至关于引入你刚才自定义样式表中的模板 github

5. 大功告成，成功使用，很是方便

之后只须要npm run dev 启动则自动进行生成，建议若是以后加图，能够分出来，或者是按须要加在后面，更好的维护web

6. 适配rem的坑

我是用750设计稿用的75像素的 , 因此转换成 10rem = 750px / 1rem = 75pxnpm

坑1：单位与位置转换问题项目中使用了 postcss-px2rem-exclude 或者一些其余的转换rem工具

ps: 这些工具设置以后，都会致使rem自动转换，雪碧图位置与样式表提供的没法对应上, 因此须要针对正个雪碧图设置background-size 其实至关于，你雪碧图多少background-size就设置多少，例如雪碧图300px * 300px 那么background-size: 300px 300px, 经过设置以后，就不会遇到对应不上的问题小程序

坑2: 安卓-微信内部QQ浏览器边边角角会误差1px

好好的配了半天的我，遇到这个坑，解决了差很少6-7小时，这个问题主要是由于rem转换以后，计算值有所误差致使的，在外部浏览器打开都没问题，安卓微信内部QQ浏览器就出现误差问题，用别的手机也会出现，我试图用%代替，可是未能成功，尝试过用精确的函数去计算精度问题。发现仍是会误差，总的来讲不知道哪一个环节出了问题。那么，我就不纠结这些事了。

其一在配置样式表中加入 padding: 1px 去解决转回的时候弥补了一些计算js存在的精度

其二就是把配置中spritesmithOptions.padding 间距设置大一点，雪碧图方向修改掉top-down，就解决了rem在微信内部QQ浏览器

spritesmithOptions: {
    #针对上面生成的样式表的相对路径sprite.[styl|css|stylus|scss|less]
    algorithm: 'top-down', # 从上到下排列雪碧图
    padding: 20, # 雪碧图的间距
}
复制代码

总结: 已经没法思考了...