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'(…)
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
.
In an existing angular-cli project that was set up with the default css
styles you will need to do a few things:
scss
Manually change in
.angular-cli.json
(Angular 5.x and older) orangular.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)
Rename your existing .css
files to .scss
(i.e. styles.css and app/app.component.css)
Point the CLI to find styles.scss
Manually change the file extensions in
apps[0].styles
inangular.json
Change the
styleUrls
in your components to match your new file names
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