laravel-mix: 'npm run watch' endless loop of rebuilding css

Laravel Mix Version: laravel-mix@4.0.14
Node Version: 10.15.0
NPM Version: 6.4.1
OS: Windows 10

Description:

Trying to compile an scss file, the watch task will build the css over and over multiple times per second.

Steps To Reproduce:

webpack.mix.js

let mix = require('laravel-mix');
mix.sass('resources/assets/sass/test.scss', 'public/css');

test.scss

@import 'test2';

@font-face {
    font-family: 'Open Sans Light';
    src: url('../fonts/open-sans-v15-latin-300.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

_test2.scss

/*
A
*/

Result:

 10% building 1/1 modules 0 active
webpack is watching the files…
98% after emitting SizeLimitsPlugin DONE  Compiled successfully in 1620ms12:08:58
Asset       Size  Chunks             Chunk Names
                                                     /css/test.css  204 bytes     mix  [emitted]  mix
fonts/open-sans-v15-latin-300.ttf?177cc92d2e8027712a8c1724abd272cd     27 KiB          [emitted]
 WAIT  Compiling...12:08:58

 98% after emitting SizeLimitsPlugin DONE  Compiled successfully in 33ms12:08:58
Asset       Size  Chunks             Chunk Names
                                                     /css/test.css  204 bytes     mix  [emitted]  mix
fonts/open-sans-v15-latin-300.ttf?177cc92d2e8027712a8c1724abd272cd     27 KiB          [emitted]
 WAIT  Compiling...12:08:58

 98% after emitting SizeLimitsPlugin DONE  Compiled successfully in 24ms12:08:59
Asset       Size  Chunks             Chunk Names
                                                     /css/test.css  204 bytes     mix  [emitted]  mix
fonts/open-sans-v15-latin-300.ttf?177cc92d2e8027712a8c1724abd272cd     27 KiB          [emitted]
[... continuing forever]

The font file linked by url() exists and is copied as expected. Using a single line comment instead of a multiline comment in _test2.scss works as expected and does not exhibit this behavior. Moving the multiline comment to test1.scss and removing the @import works as expected, and removing the @font-face also prevents the loop. It’s the combination of @import, @font-face and the multiline comment in the imported file that cause the watch task to loop.

Needless to say, dev and prod tasks work perfectly fine, everything is compiled properly, no errors anywhere.

About this issue

Original URL
State: closed
Created 5 years ago
Comments: 21 (1 by maintainers)

Most upvoted comments

This solution makes it possible to continue using glob patterns even with Laravel Mix:

yarn add fast-glob -D and then

module.exports = {
    content: require('fast-glob').sync([
        './**/*.php'
    ]),
    theme: {
        extend: {},
    },
    plugins: [],
}

It works perfectly and solves the problem of the rebuild loop.

+63

f-liva on Dec 20, 2021

In case anyone wants to know I fixed this by installing node-sass and sass-loader npm install node-sass sass-loader

+16

rafailml on Oct 7, 2019

For those who currently switched to Tailwind CSS V3 and are uing jit mode this solution actually works. In my case I am using Laravel Jigsaw here is my tailwind.config.js file mix-with-tailwindcss3

mostafa-A48 on Jan 5, 2022

if you put the image to resources/images they will be automatically copied to the public/images and there will be no loop present 😃 the same goes with the font resources/fonts copied to public/fonts

Morpheus-ro on Jan 1, 2020

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

stale[bot] on May 21, 2019

This issue seems like it can have multiple error sources. In my case I it was relevant to Tailwind CSS and the purge option. I don’t remember exactly what package I have installed but I copy pasted the following to my tailwind.config.js:

module.exports = {
    mode: 'jit',
    purge: {
        content: [
            './public/**/*.html',

After I have removed the line './public/**/*.html', it worked.

alexiovay on Sep 2, 2021

credits to ** @Morpheus-ro** Don’t put any new files ( fonts or images ) in the public or dist folder … put them in your resources and the compiler will take care of copying them into your public folder …

amans199 on Mar 9, 2020

@mostafa-A48 this solved it for me - thanks!

For anyone reading this using the ‘blog’ starter template with jigsaw, you also need to include vue as an extension for the search component to work.

my tailwind.config.js file:

module.exports = {
    content: require('fast-glob').sync([
        'source/**/*.{blade.php,md,html,vue}'.  // Added 'vue'
        ],{ dot: true }),
    theme: { ...

adrelliott on Jan 20, 2022

The issue does not exist in laravel-mix@3.0.0

lkreher on Jan 17, 2019