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

时间:2022-07-31 20:33:12

先执行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文件即可