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'(…)
Click on the URL button, Enter URL and Submit. This tool supports loading the CSS File to transform to SCSS. Click on the Upload button and select File. CSS to SCSS Online works well on Windows, MAC, Linux, Chrome, Firefox, Edge, and Safari.
SCSS contains all the features of CSS and contains more features that are not present in CSS which makes it a good choice for developers to use it. SCSS is full of advanced features. SCSS offers variables, you can shorten your code by using variables. It is a great advantage over conventional 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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With