Angular-cli from css to scss

Question

I've read the documentation, which says that if I want to use scss I have to run the following command:

ng set defaults.styleExt scss

But when I do that and make that file, I still receive this error in my console:

styles.bundle.js:33Uncaught Error: Module build failed: Error: ENOENT: no such file or directory, open '/Users/Egen/Code/angular/src/styles.css'(…)

Answer 1

For Angular 6 check the Official documentation

Note: For @angular/cli versions older than 6.0.0-beta.6 use ng set in place of ng config.

For existing projects

In an existing angular-cli project that was set up with the default css styles you will need to do a few things:

1. Change the default style extension to scss

Manually change in .angular-cli.json (Angular 5.x and older) or angular.json(Angular 6+) or run:

ng config defaults.styleExt=scss

if you get an error: Value cannot be found. use the command:

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

(*source: Angular CLI SASS options)

2. Rename your existing .css files to .scss (i.e. styles.css and app/app.component.css)

3. Point the CLI to find styles.scss

Manually change the file extensions in apps[0].styles in angular.json

4. Point the components to find your new style files

Change the styleUrls in your components to match your new file names

For future projects

As @Serginho mentioned you can set the style extension when running the ng new command

ng new your-project-name --style=scss

If you want to set the default for all projects you create in the future run the following command:

ng config --global defaults.styleExt=scss

Answer 2

As of ng6 this can be accomplished with the following code added to angular.json at the root level:

Manually change in .angular.json:

"schematics": {
  "@schematics/angular:component": {
    "styleext": "scss"
  }
}

Answer 3

CSS Preprocessor integration for Angular CLI: 6.0.3

When generating a new project you can also define which extension you want for style files:

ng new sassy-project --style=sass

Or set the default style on an existing project:

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

Angular CLI Documentation for all major CSS preprocessors

Answer 4

For Angular 6,

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

note: @schematics/angular is the default schematic for the Angular CLI