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:

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

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.

score 23 · Answer 1 · edited Jan 16 '19 at 14:08

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

I can not thank you enough! It saved me 4mb in main.js – Trong Lam Phan Aug 31 '19 at 09:17 — Trong Lam Phan, Aug 31 '19 at 09:17

score 11 · Accepted Answer · answered Nov 24 '17 at 12:18

11

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.

answered Nov 24 '17 at 12:18

UncleDave

6,872
1
26
44

6

It seems that, functions should be declared before variables. (for bootstrap 4x) – Rzassar Apr 10 '18 at 16:52

score 6 · Answer 3 · answered Aug 22 '18 at 04:31

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"

score 2 · Answer 4 · answered Apr 13 '20 at 07:33

2

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.

answered Apr 13 '20 at 07:33

Thanapooom Ptjrk

351
3
6

Works for Angular 13.1.1 and Bootstrap 5.1.3. – Przemek Pobuta Jan 17 '22 at 15:52

score 0 · Answer 5 · answered Nov 24 '17 at 12:16

0

if you are using sass you can just import bootstrap directly into your styles.scss no need to add it to the angular-cli.json file.

More info -> https://github.com/angular/angular-cli/wiki/stories-include-bootstrap

answered Nov 24 '17 at 12:16

Eduardo Vargas

8,752
2
20
27

In my case I had an error using this solution, something I couldn't figure out I was hoping to avoid it. – gyozo kudor Nov 24 '17 at 12:26

score -1 · Answer 6 · answered Jul 16 '18 at 14:01

-1

There are some handy extra mixins pack I recently commited. Feel free to use it https://github.com/Omi0/boostrap-mixins

answered Jul 16 '18 at 14:01

Timothy

3,213
2
21
34

How do I use bootstrap mixins in angular-cli

6 Answers6