Angular 7: generating @angular/material component give sass file with css syntax

Question

after generating a new project with Angular CLI and choosing SASS:

Which stylesheet format would you like to use? SASS   [ http://sass-lang.com   ]

adding material with ng:

 ng add @angular/material

and finally generating the nav-bar component of material with:

ng generate @angular/material:materialNav --name=main-nav

Gives us a main-nav.component.sass with a css syntax:

.sidenav-container {
  height: 100%;
}

.sidenav {
  width: 200px;
}

.sidenav .mat-toolbar {
  background: inherit;
}

.mat-toolbar.mat-primary {
  position: sticky;
  top: 0;
  z-index: 1;
}

Anyone knows if it's possible to generate from @angular/material with sass syntax?

Thank you

There is a github issue [Material schematics don't support legacy "Sass" format](https://github.com/angular/material2/issues/15153). Where @jelbourn says ``We currently only support the more recent `.scss` format (or anything that's a superset of css)``. Their plan is ``If the user's project is configured to use `.sass` (not `.scss`) or Stylus, we should emit plain CSS files``, see: https://github.com/angular/material2/issues/15164 — frido, Feb 14 '19 at 16:11

score 0 · Answer 1 · answered Feb 14 '19 at 12:03

0

suffix with --style switch with the required style sheet

ng generate @angular/material:materialNav --name=main-nav --style=sass

You can refer this SO link Angular CLI SASS options for more options and understanding

answered Feb 14 '19 at 12:03

Hameed Syed

3,939
2
21
31

thank you for the answer but i already tried and it still gives mea SASS file with css syntax. Just tried again, and yes, i confirm, the syntax is css, not sass – Arnaud Delubac Feb 14 '19 at 12:31
I think you need to set it globally in your angular CLI. – Hameed Syed Feb 14 '19 at 12:34

Angular 7: generating @angular/material component give sass file with css syntax

1 Answers1