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.
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.
styles
array, angular will parse both less
and scss
@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"
],
...
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"
]
},