I upgraded my angular 10 app to 11. I also upgraded igniteui-cli to the latest. I ran the command ng add igniteui-angular to integrate igniteui to the app.

The styles.sass file looks like below. When I run the command npm start, I get the following error.

// CSS Reset, comment out if not required or using a different module
@import '~minireset.css/minireset';
/* You can add global styles to this file, and also import other style files */

@import "~igniteui-angular/lib/core/styles/themes/index";
// Uncomment the following lines if you want to add a custom palette:
// $primary: #731963 !default;
// $secondary: #ce5712 !default;
// $app-palette: igx-palette($primary, $secondary);

/* autoprefixer grid: on */

@include igx-core();
@include igx-theme($default-palette);

SASS Error:

Error: ./src/styles.sass
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: semicolons aren't allowed in the indented syntax.
  ╷
5 │ @import "~igniteui-angular/lib/core/styles/themes/index";
  │                                                         ^
  ╵
  src\styles.sass 5:57  root stylesheet
  

package.json contents:

"dependencies": {
    "@angular/animations": "^11.0.2",
    "@angular/common": "^11.0.2",
    "@angular/compiler": "^11.0.2",
    "@angular/core": "^11.0.2",
    "@angular/forms": "^11.0.2",
    "@angular/platform-browser": "^11.0.2",
    "@angular/platform-browser-dynamic": "^11.0.2",
    "@angular/router": "^11.0.2",
    "@datorama/akita": "^4.23.2",
    "@datorama/akita-ng-entity-service": "^1.0.0",
    "@igniteui/material-icons-extended": "^2.4.0",
    "hammerjs": "^2.0.8",
    "igniteui-angular": "^11.0.3",
    "jszip": "^3.5.0",
    "minireset.css": "~0.0.4",
    "resize-observer-polyfill": "^1.5.1",
    "rxjs": "~6.6.0",
    "tslib": "^2.0.0",
    "web-animations-js": "^2.3.2",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^0.1100.2",
    "@angular/cli": "^11.0.2",
    "@angular/compiler-cli": "^11.0.2",
    "@datorama/akita-ng-router-store": "^3.1.3",
    "@datorama/akita-ngdevtools": "^3.0.2",
    "@igniteui/angular-schematics": "~11.0.700",
    "@types/hammerjs": "^2.0.36",
    "@types/jasmine": "~3.6.0",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^12.19.6",
    "codelyzer": "^6.0.0",
    "jasmine-core": "~3.6.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~5.1.1",
    "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",
    "protractor": "~7.0.0",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "typescript": "^4.0.5"
  }