Replace deprecated node-sass dependency with sass

[0xdevalias]

Once create-react-app / react-scripts supports it, we should upgrade from the deprecated node-sass dependency to the Dart based sass

Related upstream issues:

• fix: support node-sass v5.0.0 webpack-contrib/sass-loader#899
• node-sass v5.0.0 compilation error facebook/create-react-app#9986
  • Upgrade sass-loader facebook/create-react-app#9988
  • 4.0.2 milestone: https://github.com/facebook/create-react-app/milestone/79
• Move away from node-sass and update documentation related to it facebook/create-react-app#10045

  • 9.0.0 (2020-07-02): Move away from node-sass and update documentation related to it facebook/create-react-app#10045 (comment): dart-sass is the default option in sass-loader. So what you need to do it's just install sass and it will work. Docs regarding it should be updated

  • 7.2.0 (2019-08-08): https://github.com/webpack-contrib/sass-loader/blob/master/CHANGELOG.md#900-2020-07-02

    • prefer sass (dart-sass) by default, it is strongly recommended to migrate on sass (dart-sass)

  • https://github.com/webpack-contrib/sass-loader/blob/master/CHANGELOG.md#720-2019-08-08

    • support auto resolving dart-sass

See also:

• https://github.com/facebook/create-react-app/blob/v3.4.4/packages/react-scripts/package.json#L73
  • "sass-loader": "8.0.2"
• https://webpack.js.org/loaders/sass-loader/

  • We recommend using Dart Sass

  • https://github.com/webpack-contrib/sass-loader/blob/v8.0.2/package.json#L43-L44
    • "node-sass": "^4.0.0"
    • "sass": "^1.3.0"
  • https://github.com/webpack-contrib/sass-loader/blob/v10.0.5/package.json#L43-L44
    • "node-sass": "^4.0.0 || ^5.0.0"
    • "sass": "^1.3.0"
• https://github.com/sass/node-sass

  • Warning: LibSass and Node Sass are deprecated. While they will continue to receive maintenance releases indefinitely, there are no plans to add additional features or compatibility with any new CSS or Sass features. Projects that still use it should move onto Dart Sass.

  • Mark Node Sass as deprecated sass/node-sass#2952
• https://sass-lang.com/dart-sass
  • https://github.com/sass/dart-sass

[0xdevalias]

From #850:

• Move away from node-sass and update documentation related to it facebook/create-react-app#10045 (comment): dart-sass is the default option in sass-loader. So what you need to do it's just install sass and it will work. Docs regarding it should be updated

  • 9.0.0 (2020-07-02): https://github.com/webpack-contrib/sass-loader/blob/master/CHANGELOG.md#900-2020-07-02

    • prefer sass (dart-sass) by default, it is strongly recommended to migrate on sass (dart-sass)

  • 7.2.0 (2019-08-08): https://github.com/webpack-contrib/sass-loader/blob/master/CHANGELOG.md#720-2019-08-08

    • support auto resolving dart-sass

• https://github.com/facebook/create-react-app/blob/v3.4.4/packages/react-scripts/package.json#L73

  • "sass-loader": "8.0.2"

---

Since we already seem to be using a version of saas-loader that supports the non-deprecated dart-sass, and because create-react-app's react-scripts doesn't seem to support node-sass v5 yet (targeted for 4.0.2 milestone), I think our best way forward here is to switch to using dart-sass instead of this.

Originally posted by @0xdevalias in #1079 (comment)