Topic: Ng Build Error
ERROR in ./src/styles.scss Module build failed (from ./node_modules/@angular-devkit/build-angular/node_modules/mini-css-extract-plugin/dist/loader.js): ModuleBuildError: Module build failed (from ./node_modules/sass-loader/lib/loader.js):
height: Calc(100vh - 116px); ^ Incompatible units: 'px' and 'vh'. in E:\CRMV3.0\AFA-CRM\AFA-CRM\ClientApp\src\styles.scss (line 77, column 16) at E:\CRMV3.0\AFA-CRM\AFA-CRM\ClientApp\node_modules\webpack\lib\NormalModule.js:313:20 at E:\CRMV3.0\AFA-CRM\AFA-CRM\ClientApp\node_modules\loader-runner\lib\LoaderRunner.js:367:11 at E:\CRMV3.0\AFA-CRM\AFA-CRM\ClientApp\node_modules\loader-runner\lib\LoaderRunner.js:233:18 at context.callback (E:\CRMV3.0\AFA-CRM\AFA-CRM\ClientApp\node_modules\loader-runner\lib\LoaderRunner.js:111:13) at Object.callback (E:\CRMV3.0\AFA-CRM\AFA-CRM\ClientApp\node_modules\sass-loader\lib\loader.js:52:13) at Object.done [as callback] (E:\CRMV3.0\AFA-CRM\AFA-CRM\ClientApp\node_modules\neo-async\async.js:8069:18) at options.error (E:\CRMV3.0\AFA-CRM\AFA-CRM\ClientApp\node_modules\node-sass\lib\index.js:294:32) ERROR in ./src/app/settings/companykit/companykit.component.scss Module build failed (from ./node_modules/sass-loader/lib/loader.js):
height: Calc(100vh - 291px);
^
Incompatible units: 'px' and 'vh'.
in E:\CRMV3.0\AFA-CRM\AFA-CRM\ClientApp\src\app\settings\companykit\companykit.component.scss (line 199, column 18)
At first i thought the reported problem was directly related to MDB, but from what i see the error is coming from custom code from one of your components.
This is probably caused by the node-sass library that cannot perform arithmetic operations on values that cannot be converted from one unit to another. Newer versions of Angular use sass (dart-sass) library. I tested this code on v15 and it worked correctly.
As a workaround you can try to use interpolation to convert both values to strings:
$a: 100%;
$b: 291px;
.class {
height: calc(#{$a} - #{$b});
}
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- Premium support: Yes
- Technology: MDB Angular
- MDB Version: MDB4 8.2.0
- Device: Laptop
- Browser: Chrome
- OS: Windows 10
- Provided sample code: No
- Provided link: No
Arkadiusz Idzikowski staff commented 2 years ago
We would need some more information about your app configuration. Please edit your post and provide a list of the dependencies (and its versions) from the
package.jsonfile.AFA pro premium commented 2 years ago
{ "name": "afa_crm", "version": "0.0.0", "scripts": { "ng": "ng", "start": "ng serve", "build": "ng build", "build:ssr": "ng run AFA_CRM:server:dev", "test": "ng test", "lint": "ng lint", "e2e": "ng e2e" }, "private": true, "dependencies": { "@angular/animations": "8.2.0", "@angular/cdk": "^8.2.3", "@angular/common": "8.2.0", "@angular/compiler": "8.2.0", "@angular/core": "8.2.0", "@angular/forms": "8.2.0", "@angular/platform-browser": "8.2.0", "@angular/platform-browser-dynamic": "8.2.0", "@angular/platform-server": "8.2.0", "@angular/router": "8.2.0", "@azure/msal-angular": "^1.1.2", "@circlon/angular-tree-component": "^10.0.4", "@fortawesome/fontawesome-free": "^5.15.4", "@kolkov/angular-editor": "^1.2.0", "@microsoft/microsoft-graph-client": "^2.2.1", "@microsoft/microsoft-graph-types": "^1.41.0", "@ng-bootstrap/ng-bootstrap": "^5.3.1", "@ng-select/ng-select": "^3.7.3", "@nguniversal/module-map-ngfactory-loader": "8.0.0-rc.1", "@types/chart.js": "^2.9.34", "angular-bootstrap-md": "^12.0.0", "angular-ng-autocomplete": "^2.0.1", "angular2-draggable": "^2.3.2", "animate": "^1.0.0", "animate.css": "^4.1.1", "aspnet-prerendering": "^3.0.1", "bootstrap": "^4.6.0", "chart.js": "^2.9.4", "core-js": "^2.6.12", "crypto-js": "^3.3.0", "datatables.net": "^1.11.3", "datatables.net-dt": "^1.11.3", "easy-pie-chart": "^2.1.7", "file-saver": "^2.0.5", "hammerjs": "^2.0.8", "jquery": "^3.6.0", "mini-css-extract-plugin": "^2.3.0", "moment": "^2.29.1", "moment-timezone": "^0.5.33", "msal": "^1.4.13", "ng-connection-service": "^1.0.4", "ng-multiselect-dropdown": "^0.2.14", "ng-uikit-pro-standard": "git+https://oauth2:TOKEN@git.mdbootstrap.com/mdb/angular/ng-uikit-pro-standard.git#8.2.0", "ng2-charts": "^2.4.3", "ng2-search-filter": "^0.5.1", "ngx-bootstrap": "^7.1.0", "ngx-infinite-scroll": "^8.0.2", "ngx-order-pipe": "^2.1.1", "ngx-spinner": "^8.1.0", "ngx-toastr": "^14.1.3", "oidc-client": "^1.11.5", "open-iconic": "^1.1.1", "popper.js": "^1.16.1", "rxjs": "^6.6.7", "screenfull": "^3.3.3", "table-dragger": "^1.0.3", "tslib": "^1.10.0", "underscore": "^1.13.1", "windows-iana": "^4.2.1", "xlsx": "^0.18.5", "zone.js": "~0.9.1" }, "devDependencies": { "@angular-devkit/build-angular": "^0.802.2", "@angular/cli": "8.2.0", "@angular/compiler-cli": "8.2.0", "@angular/language-service": "8.2.0", "@types/jasmine": "^3.9.1", "@types/jasminewd2": "^2.0.10", "@types/jquery": "^3.5.6", "@types/node": "~11.10.5", "bootstrap-sass": "^3.4.1", "codelyzer": "^5.2.2", "jasmine-core": "~3.3.0", "jasmine-spec-reporter": "~4.2.1", "karma": "^4.4.1", "karma-chrome-launcher": "~2.2.0", "karma-coverage-istanbul-reporter": "^2.1.1", "karma-jasmine": "~2.0.1", "karma-jasmine-html-reporter": "^1.7.0", "node-sass": "^4.14.1", "typescript": "3.4.5" }, "optionalDependencies": { "protractor": "~5.4.0", "ts-node": "~5.0.1", "tslint": "~5.9.1" }}