Vue-cli在webpack内使用雪碧图(响应式)

时间:2022-11-22 07:31:06

 

先执行install

  cnpm install webpack-spritesmith

文件位置

build\webpack.dev.conf.js

Vue-cli在webpack内使用雪碧图(响应式)

添加内容:

const SpritesmithPlugin = require('webpack-spritesmith');

找到  

文件内  plugins:

Vue-cli在webpack内使用雪碧图(响应式)

我是生成less文件后,单位rem实现雪碧图的响应式适配,用的是阿里方案页面内需引用flexbile.min.js(参考阿里手淘适配)

目录结构:

Vue-cli在webpack内使用雪碧图(响应式)

 

添加如下内容:

文件位置:

build\webpack.dev.conf.js

plugins: 内添加如下内容
    new SpritesmithPlugin({
        // 目标小图标
        src: {
            cwd: path.resolve(__dirname, '../static/images/icon'),
            glob: '*.png'
        },
        // 输出雪碧图文件及样式文件
        target: {
            image: path.resolve(__dirname, '../static/images/sprite.png'),
            css:[[path.resolve(__dirname, '../static/images/sprite.less'),{
                    format: 'function_based_template'
                }]]
        },
        customTemplates: {
            'function_based_template': path.resolve(__dirname, '../my_handlebars_template.handlebars')
        },
        // 样式文件中调用雪碧图地址写法
        apiOptions: {
            cssImageRef: './sprite.png?v='+Date.parse(new Date())
        },
        spritesmithOptions: {
            algorithm: 'binary-tree'
        }
    })

 Vue-cli在webpack内使用雪碧图(响应式)Vue-cli在webpack内使用雪碧图(响应式)

添加文件:my_handlebars_template.handlebars

文件位置:项目根目录下:\my_handlebars_template.handlebars

文件内容:

{{#block "sprites"}}
{{#block "spritesheet"}}
@img:url('{{{spritesheet.escaped_image}}}');
@r:75rem;
.icon{
   background-size: {{spritesheet.width}}/@r {{spritesheet.height}}/@r;
   background-repeat:no-repeat;
   display:inline-block;
};
{{/block}}
{{#each sprites}}
.icon-{{{strings.name}}} {
  background-image: @img;
  background-position: {{offset_x}}/@r {{offset_y}}/@r;
  width: {{width}}/@r;
  height: {{height}}/@r
};
{{/each}}
{{/block}}

命令行内运行:

    npm run dev  即可

Vue-cli在webpack内使用雪碧图(响应式)

生成这2个文件引用对应的less文件即可