[SOLVED] Mixing less and sass files in Angular application

Mixing less and sass files in Angular application

I'm building an Angular application using the ng-zorro library for components. Usually, I also import the entire Bootstrap css file for some utilities like grid system and spacing classes which I have found very useful. In all my previous experiences I have had problems with conflicts generated by ng-zorro css and Bootstrap css so, for this project, I would like to import only the Bootstrap css classes I need.

By reading the official documentation I learned how to import specific packages from Bootstrap with SCSS (e.g. @import "../node_modules/bootstrap/scss/utilities"; ).

Therefore, I have a .less file with the ng-zorro custom theme for the components and a .scss file with the Bootstrap-specific utility classes. The problem is that the Bootstrap scss file appears to not actually be seen by the components.

It might be helpful to know that I set up the project with Angular CLI and when asked what css file I wanted for the project, I chose less. The reason for my choice was that the ng-zorro custom themes must be written with .less and I want to know if there is a way to tell the Angular compiler to use both .less and .scss.

Solution

I dont think it really matters what styling sub-language you use, you just need to avoid coding it inside a CSS file, you have two options where it works.

In the angular.json, styles array, angular will parse both less and scss
In the styles array of @Component decorator, angular will parse both less and scss

Below is a stackblitz with angular parsing multiple css types

 ...
 "options": {
            "assets": [],
            "index": "src/index.html",
            "browser": "src/main.ts",
            "outputPath": "dist/demo",
            "scripts": [],
            "styles": [
              "src/global_styles.css",
              "src/global_styles.scss",
              "src/global_styles.less"
            ],
            ...

stackblitz

Additionally please have a look at this article Where it explains that you can include the files of scss and less inside the stylePreprocessorOptions.includePaths where it will get read fine

"styles": [
  "styles.scss"
],
"stylePreprocessorOptions": {
  "includePaths": [
    "../node_modules/bootstrap/scss"
  ]
},