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

Question

Creating a project and specifying a CSS preprocessor is straightforward

ng new my-app --style=scss
          ... --style=sass
          ... --style=less

Setting the default to an existing project too

ng config schematics.@schematics/angular:component.styleext scss
                                                        ... sass
                                                        ... less

But what if I want to use both Sass and Less?
Is this possible?

I'd like to integrate both Ng-zorro, which uses Less, and Clarity, which uses Sass for customizations.

Answer 1

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.

Answer 2

Maybe a little addition: This also works globally.

angular.json:

  "architect": {
    "build": {
     ..
      "options": {
       ..
        "styles": [
          "src/styles.less",
          "src/styles.scss"
        ]

Both files will be used no matters what dialect you're using.