Since Angular 13, it’s super easy to change styling support from .css standard files to modern .scss files. If you need to know more about sass/scss files and the benefits they enable, follow this link: https://sass-lang.com/ You could say they are syntactically awesome styles!
ng add schematics-scss-migrate
The script above will kickoff an Angular CLI command to update your css or scss to the other format. This works if you had scss and want to downgrade back to css as well. If you have a new project, select css as the starting from, and scss to. Next, add a .scss file to your project and the styles will be rebuilt and passed into your components when you use the following syntax:
import { Component } from "@angular/core";
@Component({
selector: "app-home",
templateUrl: "./home.component.html",
styleUrls: ["./home.styles.scss"],
})
export class HomeComponent {}
Next, create that .scss file alongside your component and those styles will be incorporated within that component. Angular has the concept of view-encapsulated styles, which prevents styles from leaking outside of the component into the global scope. You can override that option and view more about it here: Angular View Encapsulation
