SassError: Can't find stylesheet to import - getting error while taking the build in Angular15

[muhammed]

Getting below error after updated to angular15, and also using Kendo UI for the ui controls. It seems that due to the tilde key depreciated, is there any workaround for this issue?

./src/styles.scss - Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Can't find stylesheet to import.
  ╷
3 │ @import "~@progress/kendo-theme-bootstrap/scss/grid/_index.scss";
  │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  src\assets\kendo-theme\kendo-imports.scss 3:9  @import
  src\styles.scss 3: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.
  ╷
3 │ @import "~@progress/kendo-theme-bootstrap/scss/grid/_index.scss";
  │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  src\assets\kendo-theme\kendo-imports.scss 3:9  @import
  src\styles.scss 3:9                            root stylesheet

[Martin Bechev]

Hi Muhammed,

Unlike node, sass, as of now, works with local files first and then tries to resolve the path by means of checking in specific folders or use function, both provided through configuration. This being said, we use the tilde "~" to denote import from the package manager folder, because its a very obvious prefix and is not a valid path that will fall back to said function.

In short, the sass-loader team will deprecate the use of the tilde "~" and recommends any use of it in the import to be removed from the code. More information can be found on the following link:

https://github.com/webpack-contrib/sass-loader/blob/master/README.md#resolving-import-at-rules

As a side note - as of Angular v15, the tilde import will be deprecated from the angular-devkit package. We are working on releasing a fix for this scenario.

More information can be found on the following GitHub thread in our Kendo Themes monorepo:

https://github.com/telerik/kendo-themes/issues/3963

I hope this information helps.

Regards,

Martin
Progress Telerik