Infinite Loop on watch

So it looks like the latest update causes an Infinite loop of watch when I import font-awesome.scss file into my main app.scss

@import ‘…/…/plugins/fontawesome/font-awesome’;

Same thing happens for summernote & other plugins which work with font files.

[jacurtis]

KNOWN SOLUTION (with explanation)

Ok, i know why this is happening now (and how to solve it), for both images and fontawesome. There is an option in Laravel Mix to process all files with relative urls. It is not really discussed in the documentation, but its functionality can be inferred through an option I found on this page of the documentation which offers a brief explanation: https://github.com/JeffreyWay/laravel-mix/blob/master/docs/options.md

processCssUrls: true

processCssUrls: Process/optimize relative stylesheet url()'s. By default, Webpack will automatically update these URLs, when relevant. If, however, your folder structure is already organized the way you want it, set this option to false to disable processing.

So this option defaults to true. It then goes forth to copy relative URLs it finds in the SASS file (presumably LESS also, but i have not tested), and copies these to relative locations in the public directory (so the urls will continue to work after moving the processed .css file to the public/css directory).

To be honest, this functionality actually makes sense, so long as you are not trying to help Webpack, by putting the files in the public directory yourself (as i think we all where) it will work as intended. The idea is to put everything in the resources/ folder and let webpack handle the public/ directory itself.

Why FontAwesome Breaks this?

Because we pull the fontawesome.scss file into our resources/sass, it uses relative URLs to link to the font files. If you were putting the font files in the public/fonts directory (as I was), then it caused a conflict because it is trying to copy the font files from where they already are to where they already are. I think this set it into some sort of infinite loop, instead of causing an actual error.

How to solve: Put the font files inside resources/fonts and let them copy over to the public folder. After webpack processes, it will have put the files in the same place you wanted them to go anyway (public/fonts/). As an alternative solution you could opt to install fontawesome via NPM, and require it from the node_modules/ directory. After webpack processes, it will copy the font files from your node_modules/ to your public/fonts/. If you prefer to manage the public folder yourself, read below to disable this.

Why Do Public/Images Breaks this?

Once again, just like above, the relative urls used in things like background-image trigger webpack to try to “optimize and copy” the images. It is again trying to move the file from where it already is to replace it again. That is why moving the images to the resources/ folder works and so does putting them into any subfolder inside of public/images/{{subfolder}}. It works because then webpack can copy the image from the subfolder into the public/images without a conflict.

How to Solve: Put the images that you call in the SASS files, into resources/images and then when webpack runs it will “optimize and copy” them into your public/images folder at the root. If you prefer to manage the public folder yourself, read below to disable this.

---

How to disable this functionality altogether?

If you prefer to manage your public/ folder yourself and not have webpack attempt to copy and optimize things on your behalf then you can disable this functionality altogether. Simply go into your webpack.mix.js file and add options onto the end of it to not process the relative urls.

Your file will look like this, with the option disabled (defaults to true):

mix.js('resources/assets/js/app.js', 'public/js')
   .sass('resources/assets/sass/app.scss', 'public/css')
   .options({
     processCssUrls: false
   });

I have tested this in a fresh Laravel install. By setting this option to false, now both fontawesome and images placed in public/images no longer goes into an infinite loop. When I remove the option or set the option to true, and i run npm run watch again, then it enters the loop. It solves this infinite loop problem!!!

Tell your friends 😄 , happy coding!

---

It would be cool if we could have Laravel mix identify this and throw an error instead of going into an infinite loop which confuses new comers. At the very least we should document this in the documentation with the known solutions.

[CODEheures]

I have the same issue and I resolve this by adding mismatch images files use on css background rule with relative url.

My assets was:

• assets
• • sass
• • • _fileA.scss
• • • main.scss

In _fileA.scss I have this line:

background: url(../images/sprite-skin-flat.png) repeat-x;

In main.scss I have:

@import "fileA"

To solve the infinite lopp I add the image repository in my assets and it’s work well

• assets
• • images
• • • sprite-skin-flat.png
• • sass
• • • _fileA.scss
• • • main.scss

(sorry for approximate english)