node-sass considered harmful

... to your developer and Continuous Integration experience due to its painfully slow installation process.

The node-sass during its installation npm install node-sass will:

1. Trigger the node-gyp if it won't be able to find binaries for your operating system.
2. Use Python 2.7 to run some scripts.
3. Run a painfully slow postinstall process (adds up to 1 minute to your CI build time).

So if your team is using various operating systems (Windows/Linux/MacOS) or using a Continuous Integration system just replace it with a much better alternative sass.

sass is just a JavaScript package and has zero external dependencies.

Create React App

I guess the reason why node-sass is still so popular is due to the Create React App support for SASS. But you don't have to eject a CRA if you don't want to compromise your installation process or a build time. Simply use below command inside your app.

TL;DR

Transparently replace your node-sass with sass and enjoy faster builds and quicker installs:

rm -rf node_modules
npm install node-sass@npm:sass -D --legacy-peer-deps

Comments

[José Paz]

Hey Łukasz, I have been working with node-sass for the past month or so (it was used in a course and it sticked with me since) and I noticed this painfully slow builds...

This alternative looks amazing, but what would I need to change to make my node-sass app compatible with this sass package?

Thanks!

[Łukasz Wolnik]

Hey José,

the idea is to use npm's package resolution so that sass package will act as if it was node-sass. It doesn't require any changes to your current build setup. Whether it's Create React App, Webpack or something else.

You may just want to check where in your package.json file you have node-sass referenced.

If it's in devDependencies then use the line from article:

npm install node-sass@npm:sass -D --legacy-peer-deps

If in dependencies then:

npm install node-sass@npm:sass -S --legacy-peer-deps

[Melwyn Furtado]

Thanks for this information.

I was looking to replace node-sass with sass as part of upgrading Webpack and related dependencies. Found that I couldn't replace it without making some changes to codebase on extending compound selectors (sass-lang.com/documentation/breaki...).

Are you aware of any more such incompatibilities ?

[Łukasz Wolnik]

No, I wasn't even aware of @extend in SASS and LESS! Seems helpful in using BEM. Thanks for this.

But from the compatibility info on that page it looks like sass is supporting @extend whereas node-sass not. Or as you say it does but in a different way that requires changes. Good shout! I'll add a footer note to the article.