postcss-sprites: Webpack doesn't combine all images into single sprite

I use code to express my mean:

// aa.css
.a {
  background: url(./img/sprites/default/table/edit-icon.png)
}

// bb.css
.b {
  background: url(./img/sprites/default/table/offline-icon.png)
}

// main.js
require('aa.css');
require('bb.css'))

when I use webpack, generated a sprite : sprite.table.png, but only offline-icon was bundle into sprite.table.png, the correct result should be sprite.table.png include edit-icon.png and offline-icon.png both. when use require and run loader once and you cann’t make cache for this, so the ‘wrong’ result appear

can you solve the question ?

About this issue

Original URL
State: open
Created 8 years ago
Reactions: 1
Comments: 18 (5 by maintainers)

Most upvoted comments

I use the following webpack CSS rule:

exports.css = {
    test: /\.css$/,
    use: [
        'style-loader',
        'css-loader',
        {
            loader: 'postcss-loader',
            options: { plugins: postcssInit }
        }
    ]
};

function postcssInit() {
    const sheetName = basename(this.resourcePath, '.css');
    return loadPlugins.call(this, { sheetName });
}

function loadPlugins({ sheetName }) {
    return [
        // some plugins...
        require('postcss-sprites')({
            groupBy: () => Promise.resolve(sheetName),
            // more opts...
        }),
        // more plugins...
    ];
}

See https://github.com/2createStudio/postcss-sprites/issues/83 for some more details about my setup as well as https://github.com/2createStudio/postcss-sprites/pull/85.

jednano on Feb 24, 2017