Error: Module build failed (from ./node_modules/@angular-devkit/build-angular/node_modules/sass-loader/dist/cjs.js)

Question

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 class="example-spacer"></span>
    <mat-icon
      class="example-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 class="example-spacer"></span>
    <mat-icon
      class="example-icon"
      aria-hidden="false"
      aria-label="Example heart icon"
    >
      favorite
    </mat-icon>
    <mat-icon
      class="example-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.

score 5 · Accepted Answer · answered Jun 28 '22 at 07:19

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

Error: Module build failed (from ./node_modules/@angular-devkit/build-angular/node_modules/sass-loader/dist/cjs.js)

1 Answers1