'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:
- Created 5 years ago
- Comments:20 (1 by maintainers)
Top 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 >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
This solution makes it possible to continue using glob patterns even with Laravel Mix:
yarn add fast-glob -Dand thenIt works perfectly and solves the problem of the rebuild loop.
In case anyone wants to know I fixed this by installing node-sass and sass-loader
npm install node-sass sass-loader