How do I use bootstrap mixins in angular-cli

Question

I tried using a mixin in my styles.scss but it says it is not defined. I've tried:

1. Using it in styles.scss

@include media-breakpoint-up(sm) {
  .some-class {
    display: block;
  }
}

result:

@include media-breakpoint-up(sm) {
        ^
      No mixin named media-breakpoint-up

2. importing bootstrap again:

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

Now it works but bootstrap is included twice if I look in styles.bundle.js. Bootstrap is already included in angular-cli.json.

Answer 1

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