'npm run watch' endless loop of rebuilding css

See original GitHub issue
  • 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.

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Comments:20 (1 by maintainers)

github_iconTop GitHub Comments

41reactions
f-livacommented, Dec 20, 2021

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.

15reactions
rafailmlcommented, Oct 7, 2019

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

Read more comments on GitHub >

github_iconTop Results From Across the Web

'npm run watch' endless loop of rebuilding css #1942 - GitHub
Trying to compile an scss file, the watch task will build the css over and over multiple times per second. Steps To Reproduce:...
Read more >
Infinite rebuild loop in Laravel mix watch mode - Stack Overflow
Using PhpStorm 2020.1 under Xubuntu 18.04, I'm building a JS game into a Laravel 6.18.8 fresh install. Each time I run npm run...
Read more >
npm run watch in infinite loop (Laravel 5.4) - Laracasts
Hi there, I have following error when using npm run watch on latest Laravel 5.4: 95% emittingError: EBUSY: resource busy or locked, ...
Read more >
Docs • Svelte
With this, npm run build will generate HTML, JS and CSS files inside the dist directory. The Svelte team maintains a VS Code...
Read more >
Just-in-Time Mode - Tailwind CSS 中文文档
Tailwind CSS v2.1 introduces a new just-in-time compiler for Tailwind CSS that ... src/css/styles.css , you will get an infinite rebuild loop in...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found