How to add scss in an existing angular project

user_13152124 0
Viewed 3333

I use angular13.0.4 ,I want to update the css file to Scss . I tried different way but not get any success using that tricks , How to change css to scss in existing angular project.

angular
2 Answers

In the latest version of Angular (v13), It's npm library migrating from css to scss and vice versa

ng add schematics-scss-migrate
user_104508030

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

4.Point the components to find your new style files Change the styleUrls in your components to match your new file names

user_175879030
Related