0
(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:

  1. Updating node-sass version
  2. Replacing the deprecated node-sass with the sass library as per the post here
  3. Trying updated versions of sass-loader
  4. Updating @okta-signin-widget to newer versions
  5. Trying different sass versions for the undefined function math.div error (am using 1.62.1 so the function is supposed to be supported here)
  6. Removing node-sass, sass-loader altogether and running a new npm i after deleting modules as per post here
  7. Installing the aforementioned packages as dependencies vs. devDependencies also did nothing
ascendev
  • 35
  • 3
  • Resolved issue: had to downgrade @okta/@okta-signin-widget to 5.4.0 and then remove the library's SCSS file from `angular.json`'s build -> styles array. – ascendev May 10 '23 at 19:41

0 Answers0