How do I use bootstrap mixins in angular-cli

user_286121 0
Viewed 13472

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

  1. 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.

scss-mixins bootstrap-4 angular sass css
6 Answers

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
user_15423990

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.

user_19396970

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"

user_2128890

You can import mixins to use in scss files by:

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

Also, if you try to import only mixins, it might give you an error.

user_75551930
user_46366800
user_95902510
Related