How do I use bootstrap mixins in angular-cli

I've the same problem with all components in theirs own folder projects/<prj>/src/app/navbar/navbar.scss:

and I've fixed temporary adding manually

   @import '~bootstrap/scss/functions';
   @import '~bootstrap/scss/variables';
   @import '~bootstrap/scss/mixins';

I know for sure that isn't beautiful but resolve it ...

My packages versions below

Angular CLI: 7.0.6
Node: 9.10.1
OS: darwin x64
Angular: 7.0.4
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

Package                            Version
------------------------------------------------------------
@angular-devkit/architect          0.10.6
@angular-devkit/build-angular      0.10.6
@angular-devkit/build-ng-packagr   0.10.7
@angular-devkit/build-optimizer    0.10.6
@angular-devkit/build-webpack      0.10.6
@angular-devkit/core               7.0.6
@angular-devkit/schematics         7.0.6
@angular/cli                       7.0.6
@angular/fire                      5.1.0
@ngtools/json-schema               1.1.0
@ngtools/webpack                   7.0.6
@schematics/angular                7.0.6
@schematics/update                 0.10.6
ng-packagr                         4.4.5
rxjs                               6.3.3
typescript                         3.1.6
webpack                            4.19.1

Rather than importing all of bootstrap again you actually just want the mixins file and variables file:

@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";

These files have no actual CSS in them - only SCSS variables and mixins.

There are two ways of doing this. Basically, both the ways are same, they are just different in syntax. So at the top of your SCSS file, use the following line:

@import "~bootstrap/scss/bootstrap-grid.scss";

OR

@import "../../node_modules/bootstrap/scss/bootstrap-grid.scss";

Here is a complete example:

main.scss

@import "~bootstrap/scss/bootstrap-grid.scss

.test {
  background-color: yellow;
}
@include media-breakpoint-up(md) {
  .test {
    background-color: red;
  }
}

HTML code:

<div class="test">
  This div should have yellow background on mobile and red background in medium devices and up.
</div>

NOTE: This assumes that you already have Bootstrap in your list of dependencies in package.json file. If not, then you can add the following line in it and you may change the Bootstrap version as you see fit.

"bootstrap": "4.1.3"