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

Use command:

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

Answer 2

In ng6 you need to use this command, according to a similar post:

ng config schematics.@schematics/angular:component '{ styleext: "scss"}'

Answer 3

A brute force change can be applied. This will work to change, but it's a longer process.

Go to the app folder src/app

1. Open this file: app.component.ts

2. Change this code styleUrls: ['./app.component.css'] to styleUrls: ['./app.component.scss']

3. Save and close.

In the same folder src/app

1. Rename the extension for the app.component.css file to (app.component.scss)

2. Follow this change for all the other components. (ex. home, about, contact, etc...)

The angular.json configuration file is next. It's located at the project root.

1. Search and Replace the css change it to (scss).

2. Save and close.

Lastly, Restart your ng serve -o.

If the compiler complains at you, go over the steps again.

Make sure to follow the steps in app/src closely.

Answer 4

For users of the Nrwl extensions who come across this thread: all commands are intercepted by Nx (e.g., ng generate component myCompent) and then passed down to the AngularCLI.

The command to get SCSS working in an Nx workspace:

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

Answer 5

Open angular.json file

1.change from

"schematics": {}

to

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

2. change from (at two places)

"src/styles.css"

to

"src/styles.scss"

then check and rename all .css files and update component.ts files styleUrls from .css to .scss

Answer 6

For existing projects:

In angular.json file

1. In build part and in test part, replace:

   "styles": ["src/styles.css"], by "styles": ["src/styles.scss"],

2. Replace:

   "schematics": {}, by "schematics": { "@schematics/angular:component": { "style": "scss" } },

Using ng config schematics.@schematics/angular:component.styleext scss command works but it does not place the configuration in the same place.

In your project rename your .css files to .scss

For a new project, this command do all the work:

ng n project-name --style=scss

For global configuration

New versions seems to not have a global command