DEV Community

Cover image for Migrating from Node-Sass to Sass (Dart-Sass) with npm
Clément Creusat
Clément Creusat

Posted on • Updated on

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)


Enter fullscreen mode Exit fullscreen mode

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"
}


Enter fullscreen mode Exit fullscreen mode

by



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


Enter fullscreen mode Exit fullscreen mode

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 :

node sass scripts

to this :

sass scripts

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

Top comments (9)

Collapse
 
davidjguru profile image
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!

Collapse
 
jerrycaffe profile image
Adeleye jeremiah

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

Collapse
 
nicolasomar profile image
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!

Collapse
 
ccreusat profile image
Clément Creusat

glad to help you folks!

Collapse
 
alsabbahy profile image
Ahmed Alsabbahy

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

Collapse
 
pookiepats profile image
pookiepats

bless u

Collapse
 
chriisduran profile image
Christopher Duran

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

Image description

Collapse
 
targtaks_awan profile image
targtaks

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

Collapse
 
demateu profile image
demateu • Edited

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?