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'(…)
This question is related to
css
angular
sass
angular6
angular-cli
In ng6 you need to use this command, according to a similar post:
ng config schematics.@schematics/angular:component '{ styleext: "scss"}'
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
Open this file: app.component.ts
Change this code styleUrls: ['./app.component.css']
to styleUrls: ['./app.component.scss']
Save and close.
In the same folder src/app
Rename the extension for the app.component.css file to (app.component.scss)
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.
Search and Replace the css change it to (scss).
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.
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
For existing projects:
In angular.json
file
In build
part and in test
part, replace:
"styles": ["src/styles.css"],
by "styles": ["src/styles.scss"],
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
Use command:
ng config schematics.@schematics/angular:component.styleext scss
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
In latest version of Angular (v9), below code needs to add in angular.json
"schematics": {
"@schematics/angular:component": {
"style": "scss"
}
}
Could be added using the following command:
ng config schematics.@schematics/angular:component.style scss
For Angular 6,
ng config schematics.@schematics/angular:component.styleext scss
note: @schematics/angular is the default schematic for the Angular CLI
A quick and easy way to perform the migration is to use the schematic NPM package schematics-scss-migrate. this package rename all css to scss file :
ng add schematics-scss-migrate
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"
}
}
Open angular.json file
1.change from
"schematics": {}
to
"schematics": {
"@schematics/angular:component": {
"styleext": "scss"
}
}
"src/styles.css"
to
"src/styles.scss"
then check and rename all .css
files and update component.ts files styleUrls from .css to .scss
Source: Stackoverflow.com