I'm trying to run my angular 14 app but getting the following error while trying to serve it locally. Have a look at the error below:

Build at: 2022-06-28T06:24:59.368Z - Hash: 217d45d22093a51f - Time: 5857ms
 ./src/app/app.component.sass?ngResource - Error: Module build failed (from ./node_modules/@angular-devkit/build-angular/node_modules/sass-loader/dist/cjs.js):
SassError: Expected newline.
  ╷
1 │ .example-icon {
  │               ^
  ╵
  src/app/app.component.sass 1:15  root stylesheet


** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **


✖ Failed to compile.

Here is my package.json dependecies:

  "dependencies": {
    "@angular/animations": "^14.0.0",
    "@angular/cdk": "^14.0.0",
    "@angular/common": "^14.0.0",
    "@angular/compiler": "^14.0.0",
    "@angular/core": "^14.0.0",
    "@angular/fire": "^7.4.0",
    "@angular/forms": "^14.0.0",
    "@angular/material": "^14.0.0",
    "@angular/platform-browser": "^14.0.0",
    "@angular/platform-browser-dynamic": "^14.0.0",
    "@angular/router": "^14.0.0",
    "firebase": "^9.8.2",
    "rxjs": "~7.5.0",
    "sass-loader": "^13.0.2",
    "tslib": "^2.3.0",
    "webpack": "^5.73.0",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^14.0.0",
    "@angular/cli": "~14.0.0",
    "@angular/compiler-cli": "^14.0.0",
    "@types/jest": "^28.1.1",
    "jest": "^28.1.0",
    "jest-preset-angular": "^12.1.0",
    "node-sass": "^7.0.1",
    "typescript": "~4.7.2"
  },

app.component.html

<mat-toolbar color="primary">
  <mat-toolbar-row>
    <span>Custom Toolbar</span>
  </mat-toolbar-row>

  <mat-toolbar-row>
    <span>Second Line</span>
    <span ></span>
    <mat-icon
      
      aria-hidden="false"
      aria-label="Example user verified icon"
    >
      verified_user
    </mat-icon>
  </mat-toolbar-row>

  <mat-toolbar-row>
    <span>Third Line</span>
    <span ></span>
    <mat-icon
      
      aria-hidden="false"
      aria-label="Example heart icon"
    >
      favorite
    </mat-icon>
    <mat-icon
      
      aria-hidden="false"
      aria-label="Example delete icon"
    >
      delete
    </mat-icon>
  </mat-toolbar-row>
</mat-toolbar>

app.component.sass

.example-icon {
  padding: 0 14px;
}

.example-spacer {
  flex: 1 1 auto;
}

My environment:

Angular CLI: 14.0.0 Node: 14.18.0

I am not being able to build the angular project.

CodePudding user response：

The main reason for the error is that you're using a SASS file instead of SCSS. (What's the difference?) According to your syntax you want to use SCSS. So you should rename you style file to app.component.scss and change the Angular CLI to use the SCSS syntax with this command:

ng config schematics.@schematics/angular:component.styleext scss

You can also take a look at this post here to change the Angular CLI options to your preferred syntax:

Angular CLI SASS options

If you want to write the styling in SASS, you've to write it like this:

.example-icon 
    padding: 0 14px 
.example-spacer 
    flex: 1 1 auto