Migrating from node-sass to dart-sass

[tay1orjones]

Have you tried migrating your codebase using carbon-components from node-sass to sass (dart-sass) and have any feedback? We'd love to hear it! From issues that you might have run into to questions you might have, feel free to post anything here related to migrating away from node-sass.

Thanks so much for your help! We really appreciate it 🙏

[tay1orjones]

Updating usage of / operator to use math.div

A common issue projects see when building an existing project with sass for the first time is many deprecation warnings about division:

DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div($step - 2, 4)

More info and automated migrator: https://sass-lang.com/d/slash-div

We've found a few approaches helpful to mitigate these warnings:

1. Ignore them! 😄 They're noisy but ultimately shouldn't impact the success of your build.
2. Run the sass-migrator division to automatically update usages from / to math.div
3. Convert simple division to use multiplication instead. ex 16px / 4 to 16px * 0.25
4. If you're a library author, you may find it necessary to support node-sass and sass at the same time. Taking advantage of import-only files (filename.import.scss), you can provide an alternate file that will be used by sass, while the legacy file will be used by node-sass. Check out this informative comment from a sass team member on the approach, and a subsequent pull request where this was used in Carbon.