Angular not compiling SASS/SCSS files

Question

Angular CLI is not compiling SCSS files, even when I do ng build or npm run build.

In the .angular-cli.json file I've the following pieces of code required for implementing SCSS, AFAIK.

  ...
  "styles": ["styles.css", "../node_modules/normalize.css/normalize.css"],
  "stylePreprocessorOptions": {
    "includePaths": ["app"]
  },
  ...
  ...

  "defaults": {
    "styleExt": "scss",
    "component": {}
  }

All my scss files lie inside different component folders but within app folder like so, \src\app\shared\style. Hence, the includePaths.

My folder structure is something like this:

MyAngularProject
    |__src
        |__app
            |__styles
                |__app.scss
            |__component1
                |__styles
                    |__component2_Style.scss
            |__component2
                |__styles
                    |__component2_Style.scss

How do I get my SCSS files to compile every time ng serve or ng build is called?

Answer 1

if your scss file is linked in component decorator, then it will automatically compile linked scss to css.

i.e:

@Component({
  selector: 'app-component',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})

and for individual compiling scss check this link https://scotch.io/tutorials/using-sass-with-the-angular-cli