Laravel Mix Issues Optimising Images in Sass Files

I’ve recently been getting myself set up with Laravel Mix and found myself battling with Webpack. I’ve been finding compilation issues when trying to process Sass files and been getting errors like these:-

Module build failed: Error: spawn /home/vagrant/Code/example/node_modules/mozjpeg/vendor/cjpeg ENOENT
Module build failed: Error: spawn /home/vagrant/Code/example/node_modules/gifsicle/vendor/gifsicle ENOENT
Module build failed: Error: spawn /home/vagrant/Code/example/node_modules/optipng-bin/vendor/optipng ENOENT

I eventually found the issue (and a solution). Laravel Mix is set up by default to process urls in CSS so that it will rewrite and optimise any url() calls within stylesheets. This is really useful as it will lead to optimised image files and ensure assets are versioned to get around any browser caching issues. Unfortunately my Homestead vagrant box wasn’t happy with this.

Thankfully I found a solution. I just needed to rebuild the image optimising packages using the following:-

$ npm rebuild mozjpeg
$ npm rebuild gifsicle
$ npm rebuild optipng-bin

After running those I was able to run Webpack and my assets compiled complete with optimised images.

If you’re coming across similar issues I hope this helps. If it doesn’t fix things it will hopefully get you on the right path.

Related Content

Published on