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

Comments

[David Rodríguez]

2022 and your post saved my day! I just have found a big issue in a project due to the use of node-sass (now deprecated) so I was switching to dart-sass on the fly... thanks a lot for your post! Have a nice week!

[Adeleye jeremiah]

Thanks for saving my life today.... I would have spent hours debugging the nonsense

[Nicolás Omar González Passerino]

I started to move from node-sass because some vulnerabilities reports and your post saved me hours of research.
Thank you!

[Clément Creusat]

glad to help you folks!

[Ahmed Alsabbahy]

Great post!
You saved me lots of time resolving the issue with node-sass deprecations <3

[pookiepats]

bless u

[Christopher Duran]

Is really insteresting, and now that i´m making a code interview i have to use sass.

[targtaks]

Thank you for sharing solution, I spend hours figuring out with typescript errors, God bless u.

[demateu]

If I deploy my app with docker, should I change something on the deployment file? I guess so, right? Are the dependencies in the node-modules folder after that? I guess no right?