Using both Sass (Scss) and Less in an Angular 7+ project

By setting the default CSS extension you just say what should be created when you run

ng g component test

Then the component will have styles file with extension you configured.

Anyway, it does not mean you cannot use both.

Just change the extension of generated file to .less and adapt the reference in the component.

styleUrls: ['./test.component.less'],

or even leave both files:

styleUrls: ['./test.component.less', './test.component.scss'],

So, you have one of your style files as less now.

In the end of the day you can have all possible CSS dialects mixed in your project.