node-sass makes Webpack hang when importing SASS files several times

[masqita]

I'm posting this issue as a warning for other people that come across this problem (and it doesn't take long).

This issue is being discussed on the following URLs:

• Compilation Hangs webpack/webpack-dev-server#128
• Silently fails/stalls webpack with no error webpack-contrib/sass-loader#100

Basically, node-sass has a bug which makes SASS compilation hang when you're importing the same SASS file (common mixins, colors etc.) more than a few times. Now, Webpack needs those imports to compile assets properly, but you can't use the imports and the circle is complete.

What makes this a hard bug to catch comes down to several factors:

• It works fine the first couple of imports
• The application continues working with hot replacement, it's only when you exit and restart the server the problem appears
• There is no feedback whatsoever, the building process simply hangs forever

Even though I really like SASS (I've been using it since its early Ruby days), it might be better to replace it with a different preprocessor (postcss using cssnext springs to mind).

[iam4x]

Thank's for reporting @masqita, I'll add a note on the README 👍

[iam4x]

@masqita Have you tried postcss yet?

[masqita]

I dabbled into it (using gulp as a task runner for an app mockup), but not on your stack. I can however share some experiences, which as always should be considered personal opinion and not absolute truth.

I have been using the most popular CSS preprocessor solutions on Node now and I'm still convinced PostCSS is the best way to go. Its very modular approach basically allows you to pick whatever functionality and CSS flavor you want. Especially in a case like yours, where different people appreciate the opinionated nature of boilerplate, but also like the flexibility to do things more or less the way they're used to.

Why haven't I jumped in at the deep end? The main reason is lack of time, both in terms of setting up something that does everything I need and getting the gripes with the syntax differences (which are more extensive than say going from SCSS to LESS to Stylus).

As far as the other preprocessors go, they all more or less do the same thing with only slightly different syntax. They all have their issues, for me personally LESS has been the one with the least friction (Stylus doesn't play well with CSSComb, node-sass still has serious bugs in it, …)

[iam4x]

Thank's for the review, I'm going to give it a try with webpack.

[snario]

Had this bug and caused us hours of struggling to figure it out. +1 on a fix..

[yuzhenmi]

Thanks for the explanation. Ran into this bug and spent hours getting no where. Setting UV_THREADPOOL_SIZE=100 for now to bypass it, as suggested In the sass-loader issue discussion.

[iam4x]

I'll close this since it's not an issue from the boilerplate but from node-sass.