Skip to content
New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

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

Open
shammy8 opened this issue Jun 8, 2023 · 0 comments
Open

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

shammy8 opened this issue Jun 8, 2023 · 0 comments

Comments

@shammy8
Copy link

shammy8 commented Jun 8, 2023

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
# for free to join this conversation on GitHub. Already have an account? # to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant