sass-sprite-webpack-plugin

webpack plugin that takes sprites with Sass

Getting Started

  ├── 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
}

Arguments

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.

algorithm

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

Contributing

Please take a moment to read our contributing guidelines if you haven't yet done so.

CONTRIBUTING

License

MIT