Question. How to avoid sprites overwriting

[NXTaar]

Here is my file structure

I'm using webpack

sidebar/icons.scss

.actionExit {
    background: url("images/exit.png");
    size: 26px 20px;
}

.actionMenu {
    background: url("images/menu.png");
    size: 19px 13px;
}

.actionStat {
    background: url("images/graph.png");
    size: 24px 20px;
}

//and so on

dashboard-notifications-area/styles.scss

.bubble {
    position: relative;
    top: 20px;
    left: 20px;
    size: 108px;
    background: url("bubble.png");
    color: white;
    text-align: center;
}

plugin configuration

sprites( {
            spritesmith: { padding: 10 },
            spritePath: './dist/assets'
        })

When it compiles the output is like

postcss-sprites: 0 spritesheet generated.
postcss-sprites: 0 spritesheet generated.
postcss-sprites: 0 spritesheet generated.
postcss-sprites: 1 spritesheet generated.
postcss-sprites: 1 spritesheet generated.

It generates two different spritesheets for each .scss file, and obviously the second, overrides the first one, and i get in the sprite.png only the sprite for bubble.png

How to tell the plugin to merge all of it to one file, and don't create a new sprite.png per each .scss file

[vvasilev-]

You need a single entry point so just combine your CSS files and pass them to the plugin.

[NXTaar]

Unfortunately i can't do that, because my components are independent, and they don't have a single entry point

[vvasilev-]

I think that there is no way to get working this, because webpack will process your files independently.

[NXTaar]

Ok, thanks for help. Will try something other way

[YingshanDeng]

@NXTaar I have the same problem like you. https://github.com/YingshanDeng/polymer-generate-spritesheet And now do you have a solution ?

[vvasilev-]

@YingshanDeng, You can use groupBy option to create a separate spritesheet per component.

[YingshanDeng]

Hello @vvasilev- what i need is generate all the component into one spritesheet. and it is my demo: https://github.com/YingshanDeng/polymer-generate-spritesheet but has some problem.

[Martin-Mo]

To combine all images into one sprite.png, you could try the following way:

1.Creating a mixin named "_sprites.scss" and writing all sprite related classes here

2.Extending the css classes mentioned above in your component's style file.