After recently updating to Angular 15 with Bootstrap 5, I noticed that none of my utility classes are working (e.g. mb-3, mt-5, etc.) when including bootstrap in my styles.scss as shown below.
@import 'bootstrap/scss/bootstrap.scss';
I understand that there have been some breaking changes between versions 4 and 5, and I have made the necessary adjustments in my application.
Interestingly, when I include bootstrap in my angular.json file, the utility classes work perfectly fine.
"stylePreprocessorOptions": {
"includePaths": [
"node_modules/bootstrap/scss/bootstrap.scss",
"src/styles"
]
},
However, if I remove bootstrap from my angular.json file and only include it in my styles.scss file like this:
/* variable over rides */
@import "variables";
/* import bootstrap */
@import 'bootstrap/scss/bootstrap.scss';
/* custom css below */
To achieve the desired outcome, I've included bootstrap for utilities in my angular.json file but also added bootstrap in my styles.scss file to customize the .scss variables where needed. Ideally, I would prefer to have utilities within the @import of bootstrap in my styles.scss file without the need for the angular.json inclusion.
I would greatly appreciate any assistance on this matter as it concerns me that I am importing bootstrap twice and potentially missing something important.