CODEWITHSUNDEEP
angularsass
Temp O'rary
Temp O'rary

Reputation: 5828

Angular not compiling SASS/SCSS files

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?

Upvotes: 3

Views: 20949

Answers (2)

Ravi Sevta
Ravi Sevta

Reputation: 3095

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

Upvotes: 7

David
David

Reputation: 34465

The stylePreprocessorOptions/includePath config allows you to import your scss file like

@import "variables"

provided that this files is slocated in a location included in includePath instead of having to specify explicitly the file relative path

@import "../../styles/variables.scss";

However, if you want your styles applied, you still have to explicitly import your scss file.

Depending on what that file contains, either you include it once in your .angular-cli.json, in the styles setting (if it contains global styles for your app), or you have to include it in all your scss files if that file to be included contains variables

Upvotes: 0

Related Questions