Tilde deprecation in sass-loader and not support in Angular 15+

[shammy8]

Issue Type

Sass-loader has deprecated the use of tilde for awhile now: https://github.com/webpack-contrib/sass-loader#resolving-import-at-rules

Angular 15 has totally stopped supporting tilde as well: angular/angular-cli#25266 (comment)

Hence Angular 15+ project aren't able to compile when using momentum-ui

Component or Pattern Affected

All components

Expected Behavior

When using momentum-ui library in a Angular 15+ project the momentum library should compile successfully.

Current Behavior

When using momentum-ui library in a Angular 15+ project I get this error

  │ @import '~@momentum-ui/icons/scss/momentum-ui-icons';
  │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  @momentum-ui\core\scss\momentum-ui.scss 5:9  @import
  src\styles.scss 5:9                          root stylesheet

./src/styles.scss?ngGlobalStyle - Error: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
HookWebpackError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Can't find stylesheet to import.
  ╷
5 │ @import '~@momentum-ui/icons/scss/momentum-ui-icons';
  │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  @momentum-ui\core\scss\momentum-ui.scss 5:9  @import
  src\styles.scss 5:9                          root stylesheet

Possible Solution

Remove the use of tildes in all scss files

Steps to Reproduce (for bugs)

Minimum reproduction repo: https://github.com/shammy8/test-momentum-core-with-angular-15

Context

We're unable to upgrade our app to Angular 15+. Currently using patch-package to change the node_modules directly.

Your Environment

• Library: Core, icons (these are the library we are using but I'm guessing other libraries will have the same problem)
• Version used: @momentum-ui/core 19.15.30
• Browser Name and version: Latest Chrome, Firefox etc
• Operating System and version: Both Windows and MacOs
• Link to your project: An internal Cisco project