(ERROR in ./src/styles.scss (C:/source/repos/project/Web Tier/project.angular/node_modules/css-loader/dist/cjs.js??ref--13-1!C:/source/repos/project/Web Tier/project.angular/node_modules/postcss-loader/src??embedded!C:/source/repos/project/Web Tier/project.angular/node_modules/resolve-url-loader??ref--13-3!C:/source/repos/project/Web Tier/project.angular/node_modules/@angular-devkit/build-angular/node_modules/sass-loader/dist/cjs.js??ref--13-4!./src/styles.scss)
Module build failed (from C:/source/repos/project/Web Tier/project.angular/node_modules/@angular-devkit/build-angular/node_modules/sass-loader/dist/cjs.js):
SassError: (50: #e7e9ec, 100: #c2c8ce, 200: #9aa4ae, 300: #72808e, 400: #536475, 500: #35495d, 600: #304255, 700: #28394b, 800: #223141, 900: #162130, A100: #72acff, A200: #3f8dff, A400: #0c6fff, A700: #0063f1, contrast: (50: #000000, 100: #000000, 200: #000000, 300: #ffffff, 400: #ffffff, 500: #ffffff, 600: #ffffff, 700: #ffffff, 800: #ffffff, 900: #ffffff, A100: #000000, A200: #000000, A400: #ffffff, A700: #ffffff), default: #35495d, lighter: #c2c8ce, darker: #28394b, text: #35495d, default-contrast: #ffffff, lighter-contrast: #000000, darker-contrast: #ffffff, "50-contrast": #000000, "100-contrast": #000000, "200-contrast": #000000, "300-contrast": #ffffff, "400-contrast": #ffffff, "500-contrast": #ffffff, "600-contrast": #ffffff, "700-contrast": #ffffff, "800-contrast": #ffffff, "900-contrast": #ffffff, "A100-contrast": #000000, "A200-contrast": #000000, "A400-contrast": #ffffff, "A700-contrast": #ffffff, "contrast-contrast": null) isn't a valid CSS value.
╷
155 │ color: color-mat($background);
│ ^^^^^^^^^^^
╵
projects\project.shared\shared-lib\src\styles\components\product-highlights.scss 155:36 app-product-highlights()
projects\project.shared\shared-lib\src\styles.scss 64:1 @import
projects\project.cms\my-cms\src\styles.scss 1:9 root stylesheet
ERROR in C:/source/repos/project/Web Tier/project.angular/node_modules/@okta/okta-signin-widget/dist/sass/okta-sign-in.scss (C:/source/repos/project/Web Tier/project.angular/node_modules/css-loader/dist/cjs.js??ref--13-1!C:/source/repos/project/Web Tier/project.angular/node_modules/postcss-loader/src??embedded!C:/source/repos/project/Web Tier/project.angular/node_modules/resolve-url-loader??ref--13-3!C:/source/repos/project/Web Tier/project.angular/node_modules/@angular-devkit/build-angular/node_modules/sass-loader/dist/cjs.js??ref--13-4!C:/source/repos/project/Web Tier/project.angular/node_modules/@okta/okta-signin-widget/dist/sass/okta-sign-in.scss)
Module build failed (from C:/source/repos/project/Web Tier/project.angular/node_modules/@angular-devkit/build-angular/node_modules/sass-loader/dist/cjs.js):
SassError: Undefined function.
╷
38 │ $paragraph-margin: math.div($paragraph-line-height, 2);
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
╵
node_modules\@okta\okta-signin-widget\dist\sass\common\shared\helpers\_variables.scss 38:20 @import
node_modules\@okta\okta-signin-widget\dist\sass\common\shared\helpers\_all.scss 4:9 @import
node_modules\@okta\okta-signin-widget\dist\sass\okta-sign-in.scss 3:9
package.json
"dependencies": {
"@angular/animations": "~10.2.5",
"@angular/cdk": "^10.2.7",
"@angular/common": "~10.2.5",
"@angular/compiler": "~10.2.5",
"@angular/core": "~10.2.5",
"@angular/forms": "~10.2.5",
"@angular/localize": "^10.2.5",
"@angular/material": "^10.2.7",
"@angular/platform-browser": "~10.2.5",
"@angular/platform-browser-dynamic": "~10.2.5",
"@angular/router": "~10.2.5",
"@ng-bootstrap/ng-bootstrap": "^6.0.0",
"@okta/okta-angular": "^2.0.0",
"@okta/okta-signin-widget": "^6.0.0",
"ag-grid": "^18.1.1",
"ag-grid-angular": "^18.1.0",
"ajv": "^6.9.1",
"angular-calendar": "^0.28.11",
"angularx-flatpickr": "^6.6.0",
"bootstrap": "^4.2.1",
"core-js": "^3.23.3",
"date-fns": "^1.30.1",
"flatpickr": "^4.5.2",
"fs-extra": "^7.0.1",
"hammerjs": "^2.0.0",
"jquery": "^3.6.4",
"ngx-captcha": "^8.0.0",
"ngx-owl-carousel-o": "^3.1.1",
"ngx-summernote": "^0.7.1",
"npm-upgrade": "^3.1.0",
"popper.js": "^1.14.7",
"rxjs": "~6.6.7",
"rxjs-compat": "^6.0.0",
"sass": "^1.62.1",
"sass-loader": "^12.0.0",
"summernote": "^0.8.11",
"tslib": "^2.0.0",
"wrench": "^1.5.9",
"zone.js": "~0.10.3"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.1002.4",
"@angular-devkit/build-ng-packagr": "~0.1002.4",
"@angular/cli": "~10.2.4",
"@angular/compiler-cli": "^10.2.5",
"@angular/language-service": "~10.2.5",
"@types/jasmine": "~2.8.8",
"@types/jasminewd2": "~2.0.3",
"@types/node": "^17.0.21",
"angular-in-memory-web-api": "^0.10.0",
"codelyzer": "^5.1.2",
"jasmine-core": "~3.5.0",
"jasmine-spec-reporter": "~5.0.0",
"karma": "~5.0.0",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage-istanbul-reporter": "~3.0.2",
"karma-jasmine": "~4.0.0",
"karma-jasmine-html-reporter": "^1.5.0",
"ng-packagr": "^10.1.0",
"protractor": "~7.0.0",
"ts-node": "~7.0.0",
"tsickle": "0.39.1",
"tslint": "~6.1.0",
"typescript": "~4.0.8"
}
Running ng serve
in my project results in the above errors. I have been updating packages only when necessary, but have not been able to resolve this SASS issue. I have tried the following options to no avail:
- Updating
node-sass
version - Replacing the deprecated
node-sass
with thesass
library as per the post here - Trying updated versions of
sass-loader
- Updating
@okta-signin-widget
to newer versions - Trying different
sass
versions for theundefined function math.div
error (am using 1.62.1 so the function is supposed to be supported here) - Removing
node-sass
,sass-loader
altogether and running a newnpm i
after deleting modules as per post here - Installing the aforementioned packages as dependencies vs. devDependencies also did nothing