Issue with compiled theme from SCSS source files with the latest version of kendo themes

2 posts, 0 answers
  1. Andrew
    Andrew avatar
    9 posts
    Member since:
    Jul 2011

    Posted 22 Oct Link to this post

    Today I upgrading my project, using the command npx npm-check-updates -u -f /.*@progress.*/

    My project compiles the theme from SCSS source files. 

    After the upgrade, some SCSS variables are not defined. This is one of the errors I get from the terminal:

    ERROR in ./src/assets/styles/styles.scss (./node_modules/css-loader/dist/cjs.js??ref--13-1!./node_modules/postcss-loader/src??embedded!./node_modules/resolve-url-loader??ref--13-3!./node_modules/sass-loader/dist/cjs.js??ref--13-4!./src/assets/styles/styles.scss)
    Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
    SassError: Undefined variable.
    25 │ $checkbox-hovered-border: $input-hovered-border !default;
       │                           ^^^^^^^^^^^^^^^^^^^^^
      node_modules\@progress\kendo-theme-material\scss\checkbox\_variables.scss 25:27  @import
      node_modules\@progress\kendo-theme-material\scss\checkbox\_index.scss 9:9        @import
      node_modules\@progress\kendo-theme-material\scss\adaptive\_index.scss 7:9        @import
      node_modules\@progress\kendo-theme-material\scss\grid\_index.scss 7:9            @import
      src\assets\styles\_kendo-components.scss 12:9                                    @import
      src\assets\styles\styles.scss 5:9                                                root stylesheet


    I was able to recreate the issue by

    1. create a new angular project
    2. install the inputs package:  ng add @progress/kendo-angular-inputs
    3. install material theme: npm install --save @progress/kendo-theme-material
    4. remove the following styles in angular.json
           "input": "node_modules/@progress/kendo-theme-default/dist/all.css"
    5. add the following import for inputs in styles.scss
           @import '~@progress/kendo-theme-default/scss/input/_index.scss';
    6. build the project: ng build

    Error in the terminal: 

    ERROR in ./src/styles.scss (./node_modules/css-loader/dist/cjs.js??ref--13-1!./node_modules/postcss-loader/src??embedded!./node_modules/resolve-url-loader??ref--13-3!./node_modules/sass-loader/dist/cjs.js??ref--13-4!./src/styles.scss)
    Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
    SassError: Undefined variable.
    42 │ $input-border: $button-border !default;
       │                ^^^^^^^^^^^^^^
      node_modules\@progress\kendo-theme-default\scss\input\_variables.scss 42:16  @import
      node_modules\@progress\kendo-theme-default\scss\input\_index.scss 10:9       @import
      src\styles.scss 2:9                                                          root stylesheet


    This is my package.json

      "dependencies": {
        "@angular/animations": "~10.1.1",
        "@angular/common": "~10.1.1",
        "@angular/compiler": "~10.1.1",
        "@angular/core": "~10.1.1",
        "@angular/forms": "~10.1.1",
        "@angular/localize": "~10.1.1",
        "@angular/platform-browser": "~10.1.1",
        "@angular/platform-browser-dynamic": "~10.1.1",
        "@angular/router": "~10.1.1",
        "@progress/kendo-angular-common": "^1.0.0",
        "@progress/kendo-angular-inputs": "^6.7.2",
        "@progress/kendo-angular-intl": "^2.0.0",
        "@progress/kendo-angular-l10n": "^2.0.0",
        "@progress/kendo-angular-popup": "^3.0.0",
        "@progress/kendo-drawing": "^1.5.12",
        "@progress/kendo-theme-default": "latest",
        "@progress/kendo-theme-material": "^3.21.0",
        "rxjs": "~6.6.0",
        "tslib": "^2.0.0",
        "zone.js": "~0.10.2"

    Are there more files or dependencies required? What else do I need to import in the styles. I prefer not to import all the styles since we are only using a selection of the components.

  2. Andrew
    Andrew avatar
    9 posts
    Member since:
    Jul 2011

    Posted 23 Oct Link to this post

    I found the solution to the issue I was having with my project. I now need to import the forms style. I think this is a new dependency because the forms style was not required in the previous version of material theme.

    I also got the new angular project working by importing both the button and dialog styles, along with the input style

    @import '~@progress/kendo-theme-material/scss/button';
    @import '~@progress/kendo-theme-material/scss/dialog';
    @import '~@progress/kendo-theme-material/scss/input';

Back to Top