Migrating from Node-Sass to Sass (Dart-Sass) with npm

Tired of node-sass ?

For 2 years now, LibSass and node-sass has been deprecated. A lot of reasons led the core team to this decision.
Above all, no functionality added since 2018 and a lack of support for new CSS features like calc().

I'm in charge of refactoring some legacy CSS and I was tired of not being able to handle modern CSS correctly and seeing :

Error: Node Sass does not yet support your current environment: OS X 64-bit with Unsupported runtime (64)

So, how to migrate node-sass to sass ?

Requirements:

• Minimum Node 12 👍
• A computer 😃

First, remove all node_modules folder or just the node-sass folder :

rm -rf node_modules/node-sass

Second, in your package.json, replace :

"devDependencies": {
    "node-sass": "version_installed"
}

by

"devDependencies": {
    "sass": "^1.49.9"
}

and run npm install / npm i

or

delete the dependencies of node-sass in the package.json and install sass :

npm install --save-dev sass / npm i -D sass

Third, if you have some npm scripts as I do, it goes from this :

to this :

If you want to generate some source maps, it doesn't change from node-sass to sass.
If you don't want them, just add --no-source-map in your script

One change is about output & minify css file.
With node-sass you had to add :

--output-style compressed

now, what you do is:

--style=compressed

If like me, you have some CSS dependencies from another repo, the way you import it differs a little bit.

With node-sass, it was easy to link to a node module:

@import 'node_modules/some_repo/scss/index/scss'

Now, you have to add a load path to your npm script :

sass --load-path=node_modules/ scss/index.scss dist/index.css

Then in your index.scss, change your import by

@import "some_repo/scss/index.scss";

⚠️ @import is deprecated and should not be used even if it's still maintained.
In my case, doesn't have a chance to use the new @use and @forward coming from sass

Take a look here : At rules

That's it ! Hope you enjoyed this quick tutorial.

cover: @der_maik / unsplash