Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Angular-cli from css to scss

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'(…) 
like image 690
Jamie Avatar asked Nov 21 '16 17:11

Jamie


People also ask

Can we convert CSS to SCSS?

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.

Should I use CSS or SCSS in angular?

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.


1 Answers

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)

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

  2. Point the CLI to find styles.scss

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

  1. 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 
like image 115
Chic Avatar answered Oct 23 '22 14:10

Chic