Upgrade to Angular 15 throws sass errors on Kendo-default-theme

[Nicole]

Hi there,

 

I am trying to upgrade my project from Angular 14 to Angular 15. I am getting the following errors:

./src/assets/styles/pim.scss - Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Index out of range
     ╷
1328 │     @return function-exists( $name );
     │             ^^^^^^^^^^^^^^^^^^^^^^^^
     ╵
  @progress\kendo-theme-default\dist\all.scss 1328:13  k-meta-function-exists()
  @progress\kendo-theme-default\dist\all.scss 6526:19  generate-utils()
  @progress\kendo-theme-default\dist\all.scss 6627:5   kendo-utils--layout--aspect-ratio()
  @progress\kendo-theme-default\dist\all.scss 7440:5   kendo-utils--layout()
  @progress\kendo-theme-default\dist\all.scss 13231:5  kendo-utils()
  @progress\kendo-theme-default\dist\all.scss 13259:9  @content
  @progress\kendo-theme-default\dist\all.scss 3695:9   module-render()
  @progress\kendo-theme-default\dist\all.scss 13258:5  kendo-utils--styles()
  @progress\kendo-theme-default\dist\all.scss 13264:5  @import
  src\assets\styles\_kendo-custom.scss 16:9            @import
  src\assets\styles\my.scss 5:9                       root stylesheet

./src/assets/styles/my.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: Index out of range
     ╷
1328 │     @return function-exists( $name );
     │             ^^^^^^^^^^^^^^^^^^^^^^^^
     ╵
  @progress\kendo-theme-default\dist\all.scss 1328:13  k-meta-function-exists()
  @progress\kendo-theme-default\dist\all.scss 6526:19  generate-utils()
  @progress\kendo-theme-default\dist\all.scss 6627:5   kendo-utils--layout--aspect-ratio()
  @progress\kendo-theme-default\dist\all.scss 7440:5   kendo-utils--layout()
  @progress\kendo-theme-default\dist\all.scss 13231:5  kendo-utils()
  @progress\kendo-theme-default\dist\all.scss 13259:9  @content
  @progress\kendo-theme-default\dist\all.scss 3695:9   module-render()
  @progress\kendo-theme-default\dist\all.scss 13258:5  kendo-utils--styles()
  @progress\kendo-theme-default\dist\all.scss 13264:5  @import
  src\assets\styles\_kendo-custom.scss 16:9            @import
  src\assets\styles\my.scss 5:9                       root stylesheet

 

In my _kendo-custom.scss, it's simply importing the default theme stylesheet like this:

@import "@progress/kendo-theme-default/dist/all.scss";

I have tried to upgrade all the dependencies, but it's still throwing these errors. Here is the content my package.json

    "@angular/animations": "^15.2.8",
    "@angular/cdk": "^15.2.8",
    "@angular/common": "^15.2.8",
    "@angular/compiler": "^15.2.8",
    "@angular/core": "^15.2.8",
    "@angular/forms": "^15.2.8",
    "@angular/localize": "^15.2.8",
    "@angular/material": "^15.2.8",
    "@angular/platform-browser": "^15.2.8",
    "@angular/platform-browser-dynamic": "^15.2.8",
    "@angular/router": "^15.2.8",
    "@ng-select/ng-select": "^10.0.4",
    "@progress/kendo-angular-buttons": "^11.6.0",
    "@progress/kendo-angular-common": "^11.6.0",
    "@progress/kendo-angular-dateinputs": "^11.6.0",
    "@progress/kendo-angular-dialog": "^11.6.0",
    "@progress/kendo-angular-dropdowns": "^11.6.0",
    "@progress/kendo-angular-excel-export": "^11.6.0",
    "@progress/kendo-angular-grid": "^11.6.0",
    "@progress/kendo-angular-inputs": "^11.6.0",
    "@progress/kendo-angular-intl": "^11.6.0",
    "@progress/kendo-angular-l10n": "^11.6.0",
    "@progress/kendo-angular-label": "^11.6.0",
    "@progress/kendo-angular-notification": "^11.6.0",
    "@progress/kendo-angular-pdf-export": "^11.6.0",
    "@progress/kendo-angular-popup": "^11.6.0",
    "@progress/kendo-angular-tooltip": "^11.6.0",
    "@progress/kendo-angular-treelist": "^11.6.0",
    "@progress/kendo-angular-treeview": "^11.6.0",
    "@progress/kendo-common": "^0.2.2",
    "@progress/kendo-data-query": "^1.6.0",
    "@progress/kendo-date-math": "^1.5.10",
    "@progress/kendo-drawing": "^1.17.5",
    "@progress/kendo-file-saver": "^1.1.1",
    "@progress/kendo-licensing": "^1.3.0",
    "@progress/kendo-ooxml": "^1.7.0",
    "@progress/kendo-popup-common": "^1.9.2",
    "@progress/kendo-schematics": "^3.2.0",
    "@progress/kendo-theme-default": "^6.3.0",

 

Running out of ideas now on how to resolve this. Any help would be appreciated!

[Martin Bechev]

Hi Nicole,

I can confirm that the installed versions are latest (at the time of writing the response) and compatible with Angular 15. The issue is related to where the theme is imported and how it's loaded.

Try importing the theme in the styles.scss file using the following syntax:

@import "@progress/kendo-theme-default/dist/all.scss";

and then refer that file in the angular.json file:

  "styles": [
      "src/styles.scss"
 ],

I am attaching a runnable Angular 15 application that imports the Default  theme and builds successfully.

In case the issue persists, please try modifying the attached project or provide another runnable app that reproduces the issue. Thank you in advance.

Regards,
Martin
Progress Telerik

[Nicole]

Hi Martin,

 

Thank you for you response. Importing the kendo default style sheet in the style.scss works.

For some reason, after upgrading the theme version to 6.x we were not able to nested import the style in a separate sheet. But I will import it in the style.scss for now.

[Martin Bechev]

Hi Nicole,

I am attaching a project where the theme was imported in a separate SCSS file. Please check it out and let me know if I can provide any further assistance.