Duplicate output sprite -- using Laravel Mix

[tegola]

I'm having a strange issue where the output sprite is duplicated. Basically, I get the output file both in the directory I have specified and in the <project folder>/images directory. What's even stranger is that the images have different sizes (see below).

So, given this setup:

let mix = require('laravel-mix');
let postcssSprites = require('postcss-sprites');

mix.sass('assets/test.scss', 'dist/test.css')
  .options({
    postCss: [
      postcssSprites({
        spritePath: './dist/img'
      })
    ]
  });

I get this:

images/sprite.png 1632 bytes
dist/img/sprite.png 2289 bytes

I'm using Laravel mix to build my scss files, and I suspect it might be the culprit, but before asking Laravel Mix's community I wanted to try here (sorry).

Anybody's got the same issue?

[vvasilev-]

Hey @tegola

Thanks for the report. Can you prepare a repository where we can reproduce the issue? Meanwhile, try to set the stylesheetPath option to ./dist.

[tegola]

I've tried setting the path to ./dist, but it doesn't work either. I found out that disabling processCssUrls in laravel mix does fix the issue, but I'd like to keep it on. More on url processing here.

Anyway, I find hard to believe that postcss-sprites could be the culprit here, so I think I will ask the laravel mix community.

Thanks

[vvasilev-]

I looked into Mix's source code and I think you can workaround the problem. Can you try these lines with your setup?

mix.sass('assets/test.scss', 'dist/test.css')
  .options({
    postCss: [
      postcssSprites({
        spritePath: './images',
        stylesheetPath: './dist'
      })
    ]
  });

Also, you should add sprite.png to your .gitignore file.

[tegola]

Nope, doesn't work.

I didn't want to dive in webpack configs, so I given up and used laravel mix images path, like this:

const mix = require('laravel-mix');
const postcssSprites = require('postcss-sprites');

mix.setPublicPath('dist/')
  .setResourceRoot('/dist/');

mix.sass('assets/test.scss', 'dist/test.css')
  .options({
    postCss: [
      postcssSprites({
        spritePath: 'assets/images/sprites',
      })
    ]
  });

This way, postcss-sprites generates the sprite file in assets/images/sprites and laravel mix optimizes and copy it in dist/images.

Thanks for your time anyway. You can close this issue.