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
Top comments (9)
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!
Thanks for saving my life today.... I would have spent hours debugging the nonsense
I started to move from node-sass because some vulnerabilities reports and your post saved me hours of research.
Thank you!
glad to help you folks!
Great post!
You saved me lots of time resolving the issue with node-sass deprecations <3
bless u
Is really insteresting, and now that i´m making a code interview i have to use sass.
Thank you for sharing solution, I spend hours figuring out with typescript errors, God bless u.
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?