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.
1 Answer, 1 is accepted
Rank 1
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';