css - How to use the bootstrap 4 SASS mixins with customization in Angular 7 without importing multiple bootstraps

Question

In my angular.json this is what I have

"styles": [
    "src/assets/styles.scss"
],

and in my styles.scss, I added my custom.scss

@import 'vendor/bootstrap/scss/custom';

in my custom.scss, this is what I have

// custom 24 grid system
$grid-columns: 24;

@import "node_modules/bootstrap/scss/bootstrap";

In my SASS partials files, I can use the bootstrap 4 mixins without importing my custom.scss file but for a scss file that's coupled with an Angular component, I have to import custom.scss file like this to use any of the bootstrap 4 mixins.

@import 'vendor/bootstrap/scss/custom';

but if I do this, in my style sheet, I see bootstrap being imported twice. How can I avoid duplicate imports? I've tried to add my custom.scss straight to my angular.json file but that also duplicated the import.

标签： cssangularsassbootstrap-4angular-cli