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

[lkreher]

• Laravel Mix Version: [email protected]
• 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.

[lkreher]

The issue does not exist in [email protected]

[ankurk91]

Are you using sass-loader ?

[lkreher]

Are you using sass-loader ?

yes

+-- [email protected]
+-- [email protected]

[pjhartin]

I've got the same issue using postCss

Continually get
98% after emitting SizeLimitsPlugin output to console

[raicem]

I'm having a very similar issue as well. If I import a image to my bundle it goes into endless loop when working using npm run watch. npm run dev works fine and creates my bundle.

[StanAngeloff]

This is a sample script which will reproduce the issue in a new empty directory:

#!/bin/sh

curl -LO https://raw.githubusercontent.com/laravel/laravel/5.7/package.json

npm i

echo "const mix = require('laravel-mix'); mix.sass('./sass/default.scss', 'css/default.css');" > webpack.mix.js

mkdir -p sass/
echo "body { background-image: url('../images/logo.svg'); }" > sass/default.scss

mkdir -p images/
curl -L https://upload.wikimedia.org/wikipedia/commons/3/30/Vector-based_example.svg -o images/logo.svg

npm run watch

For the issue to manifest itself, the Sass file has to be in its own directory and has to import an image from an upper-level directory. The CSS must be outputted in a separate directory, too.

This doesn't seem to be related to node-sass at all (after examining package-lock.json, node-sass is not present.

---

After some debugging, the culprit seems to be in src/builder/webpack-rules.js and has to do with how the options for the file-loader are constructed…

[stale[bot]]

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.

[rafailml]

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

[Morpheus-ro]

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

[ncla]

rafailml solution worked. I recently upgraded laravel-mix to v5 and it was producing endless loop too. I just did yarn remove sass sass-loader, then yarn run watch and it offered to install the dependencies automatically.

    Additional dependencies must be installed. This will only take a moment.
    Running: npm install sass-loader@8.* sass --save-dev --production=false

My sass and sass-loader dependencies were outdated.

-        "sass": "^1.15.2",
-        "sass-loader": "^7.1.0",
+        "sass": "^1.25.0",
+        "sass-loader": "^8.0.2",

After that the issue was gone. This could be prevented for others in the future by providing upgrade guide to v5, which does not exist currently.

[amans199]

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 ..