in Frontend

Laravel Mix (Webpack) watch command causes infinite loop

Most of the time we use Gulp in our projects but recently we discovered Laravel Mix which is a Laravel wrapper for Webpack. Like most pre-processors, there is a watch command (npm run watch), designed to watch your assets for changes and compile on the go.

We had a strange issue where we were stuck in an infinite loop. A quick Google search will show you that this can sometimes be caused by @import on the popular Font Awesome.

For us it was a simple path issue:

// The issue
background-image: url('../images/gradient.png');

// The fix
background-image: url('/images/gradient.png');

There was no feedback in terminal that the background image was not pointing to the correct place, one to remember for the future!

Write a Comment