webpack plugin that takes sprites with Sass
├── icons # 待合成的图片目录
| ├── i1.png
│ └── i2.png
├── style.scss
└── webpack.config.js
Add the plugin to your webpack
config. For example:
webpack.config.js
const SassSpriterPlugin = require('sass-sprite-webpack-plugin');
module.exports = {
module: {
rules: [
{
test: /\.s[ac]ss$/i,
use: ['style-loader', 'css-loader', 'sass-loader']
},
],
},
plugins: [
new SassSpriterPlugin('/img/[name].[hash].png', 3)
],
};
style.scss
// 生成以文件夹命名及图片名的 $icons-url 等变量
@import "./icons/*.png";
.bg-sprite {
display: block;
background: url($icons-url) 0 0 no-repeat; // 合成后图片的url
background-size: $icons-width, $icons-height; // 合成后图片的宽高
&.icon-i1 {
width: $icons-i1-width; // 注入i1.png文件的宽
height: $icons-i1-height; // 注入i1.png文件的高
background-position: -$icons-i1-x, -$icons-i1-y; //注入i1.png文件的x,y坐标的变量
}
}
//============== 编译后 ==============
.bg-sprite {
display:block;
background:url("/icons.png") 0 0 no-repeat;
background-size:86px,48px
}
.bg-sprite.icon-i1 {
width:37px;
height:42px;
background-position:-3px,-3px
}
The plugin's signature:
webpack.config.js
module.exports = {
plugins: [new CopyPlugin(filename, margin, algorithm)],
};
Name | Type | Default | Description |
---|---|---|---|
filename |
{String} |
[name].png |
Name of the result file. May contain [name],[hash] |
margin |
{Integer} |
3 |
margin between images. |
algorithm |
{String} |
binary-tree |
Organize and layout items based on various algorithms. |
Type: String
Default: binary-tree
Currently layout
supports 5 different layout types which are listed below.
See the layout for more details.
top-down |
left-right |
diagonal |
alt-diagonal |
binary-tree |
---|---|---|---|---|
![]() |
![]() |
![]() |
![]() |
![]() |
Please take a moment to read our contributing guidelines if you haven't yet done so.