angulartwitter-bootstrapsasslessng-zorro-antd

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.

    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"
      ]
    },