parcel serve hangs when importing multiple sass files

[alappe]

🐛 bug report

I'm having issues with importing the same .scss file in multiple vue components. This works in up to three components.

🎛 Configuration (.babelrc, package.json, cli command)

See https://github.com/zimmer7/parcel_vue_scss_import_issue for a minimal testcase – npm run works serves, npm run broken breaks parcel.

🤔 Expected Behavior

I should be able to use the same e.g. _variables.scss file in all of my components.

😯 Current Behavior

parcel serve hangs.

💁 Possible Solution

No clue :-(

🔦 Context

💻 Code Sample

https://github.com/zimmer7/parcel_vue_scss_import_issue

🌍 Your Environment

Software	Version(s)
Parcel	1.9.7
Node	10.7
npm/Yarn	6.1.0
Operating System	macOS

[DeMoorJasper]

This is a known bug, my current best advice is don't use sass (or try figure out why this happens and report to node-sass)

It has to do with the sass-node runtime not being able to handle multiple async concurrent calls. Probably an issue in their C code, although I might be wrong, haven't debugged it at all, just narrowed a very similar bug down to not getting a response from sass transpile.

Sidenote: This issue is probably a duplicate of another issue.

[pille72]

I have the same issue in my setup. Just tried the minimal testcase above with a quick vue/webpack setup: https://github.com/pille72/webpack_vue_scss_import_issue. Looks like that importing sass files is not a problem there, it also uses node-sass. If you ran npm i && npm run build the generated css file creates the scoped styles just fine.

Don't know what the internal differences are, but I think it's a common use case to use scoped styles in vue components in sass and import some globals / vars.

Maybe anyone has some ideas where to look at?

[DeMoorJasper]

Currently working on making parcel default to dart-sass, but still support node-sass. (See #1509)

Will update with a PR shortly.

Dart-sass appears to be way stricter and throws all kinds of errors (which is a good thing). And it will probably prevent the freezing as it uses js (or at least is compiled to js)

[tmchng]

I think I'm having a similar problem, but without the Vue part. My build freezes when I try to bundle only html+sass, and it runs fine if I comment out some common sass imports.

I discovered that there's an option called warmWorkers that is hard-coded to true inside WorkerFarm.js. My build no longer freezes after I set it to false. I have not had the time to investigate why though.

[DeMoorJasper]

@tmchng could you try with #1847 ?

It's probably not related to warmWorkers, warmWorkers probably just spawns too much async calls to node-sass

[alappe]

With #1847 and my linked case above I now get a new error:

nd@style /tmp/parcel_vue_scss_import_issue (master) ♥ npm run works                                                                                                                                                                                                                                                                                                 14:07

> testcase@1.0.0 works /private/tmp/parcel_vue_scss_import_issue
> parcel serve --no-cache works.js

Server running at http://localhost:1234
🚨  /private/tmp/parcel_vue_scss_import_issue/u.vue: Cannot read property 'walk' of null
    at HTMLAsset.generate (/private/tmp/parcel_vue_scss_import_issue/node_modules/parcel/src/assets/HTMLAsset.js:184:14)
    at HTMLAsset.process (/private/tmp/parcel_vue_scss_import_issue/node_modules/parcel/src/Asset.js:205:35)
^C
nd@style /tmp/parcel_vue_scss_import_issue (master) ♥ 

nd@style /tmp/parcel_vue_scss_import_issue (master) ♥ npm run broken                                                                                                                                                                                                                                                                                                14:07

> testcase@1.0.0 broken /private/tmp/parcel_vue_scss_import_issue
> parcel serve --no-cache broken.js

Server running at http://localhost:1234
🚨  /private/tmp/parcel_vue_scss_import_issue/u.vue: Cannot read property 'walk' of null
    at HTMLAsset.generate (/private/tmp/parcel_vue_scss_import_issue/node_modules/parcel/src/assets/HTMLAsset.js:184:14)
    at HTMLAsset.process (/private/tmp/parcel_vue_scss_import_issue/node_modules/parcel/src/Asset.js:205:35)
^C
nd@style /tmp/parcel_vue_scss_import_issue (master) ♥ 

[BBlackwo]

Came here via #1583. I tried your branch parcel-bundler/parcel#feature/dart-sass @DeMoorJasper and now I'm getting a whole bunch of sass build errors like:

Error: expected "{".
@import "../../some-file.scss";

I fix that then I get more errors. Was previously using node-sass@4.8.3.

[DeMoorJasper]

@BBlackwo Yeah dart-sass is way stricter on sass syntax, not much I can do about it, unless there is an option to disable it.

At least it shows things like codeFrames and decent errors, which node-sass did not

[manojchandrashekar]

The documentation (https://parceljs.org/scss.html) still refers to this as an open issue. Is that still needed?