SassError: semicolons aren't allowed

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"
  }

Hello Varghese,

Thank you for contacting Infragistics Support!

After further investigations I managed to reproduce the issue you’re facing and it is caused because of the extension of the styles.sass file. Please keep in mind that IgniteUI for Angular is using scss files in order our theming engine to work as expected. Having this in mind I suggest:

• renaming the styles.sass to styles.scss
• make sure to change the path to src/styles.scss instead of src/styles.sass within the angular.json configuration file for both build and production.
• Make sure that the styles of the @schematics/angular:component is set to scss within the angular.json file:

        "@schematics/angular:component": {
                 "style": "scss"
        }

Please let me know if you need any further assistance.

Best Regards,
Martin Evtimov
Entry Level Software Developer
Infragistics, Inc.