Q: How to use bootstrap-sass with @extend and mixins

[bentolor]

I tried to ask this on Stackoverflow, but did not get any response yet. My question:

I'm trying to use Twitter Bootstrap with Angular 2, SCSS and the scaffold generated by angular-cli

I want to apply the best practice to not litter my markup with Bootstrap-specific CSS classes. Instead I want to apply/use them via @extend or as mixins:

.mybutton {
   @extend .btn;
}

My problem:

• The SASS compiler throws an error, because it does not know about .btn
• If I add @import "bootstrap"; to my .scss-File, it will render the full Bootstrap-CSS in every component css

Any clues for me how this can be matched with the Angular 2 / Angular-CLI approach of handling styles?

What I've done so far

1. add @import "bootstrap"; to my app.component.scss

2. Apply ViewEncapsulation.None to the AppComponent, so Angular 2 does not apply Shadow DOM emulation and the Bootstrap CSS applies to the whole application

    @Component({
       encapsulation: ViewEncapsulation.None
    })
   

3. Include the following block into angular-cli-build.js, so relative @import will work

   sassCompiler: {
     cacheExclude: [/\/_[^\/]+$/],
     includePaths: [ 'node_modules/bootstrap-sass/assets/stylesheets' ]
   },
   vendorNpmFiles: [
       ...
       'bootstrap-sass/assets/**/*'           
   ]
   

[cwagner22]

Did you find any solution for that?

[bentolor]

@cwagner22 Unfortunately not. Currently I do litter my HTML code with foreign Bootstrap classes. Seems to be a niche problem I have here.

[filipesilva]

Tbh I'm not really sure how to reconcile this with the modular approach that encourages shadow DOM emulation.

[sballan]

Anybody find a solution?

[h3llrais3r]

Yes, you can do it like explained in the aswer at stackoverflow:
http://stackoverflow.com/questions/38071790/angular2-how-to-use-bootstrap-sass-with-extend-and-mixins-in-angular-cli

So basicly: just import the buttons part of bootstrap in your component to get it compiled.
And include the complete bootstrap.css in your angular-cli.json.

[zackarychapple]

why not just import bootstrap into the root styles.scss file that is inlined on the index page? then you don't need to tweak encapsulation

[SvenBudak]

I Tryed all this things... but he still dont find the mixins in my IDE (PhpStorm) Compiling is no problem. but it sucks that i dont got autocomplete in PhpStorm...

[Brocco]

Looks like you have an answer, also the documentation for bootstrap is improving to include bootstrap-sass with this PR: #4115

[spongessuck]

The problem isn't importing bootstrap into an app; the problem is described by the OP:

If I add @import "bootstrap"; to my .scss-File, it will render the full Bootstrap-CSS in every component css.

This means if you don't want a new copy of bootstrap included with every component you need its variables/mixins for, you need to define bootstrap-dependent parts of your component styles in the global stylesheet.

Ideally, the bootstrap SCSS would be imported once globally, and then its variables/mixins would be available to any component without having to re-import the whole thing.

[bentolor]

@spongessuck You nailed it. I always wondered what's so special about my wish to keep my code clean from Bootstrap classes that nobody else stumbles over it. Seems that most people are happy with directly using and assign Bootstrap. I would like rather to follow "Please stop embedding Bootstrap classes in your HTML!"

[spongessuck]

@bentolor I have no problem with using BS classes in my templates, and that works fine when it's included globally, but I'm still interested in being able to @extend bootstrap classes and, in particular, use bootstrap breakpoint mixins in my component stylesheets without hard-coding media queries and, more importantly, without re-importing a new copy of bootstrap for every component.

[artworkad]

@bentolor @spongessuck We can import e.g. bootstrap-grid.scss in styles.scss (root) and use the mixins in this root file only. By using /deep/ we can make classes available to child modules/components. However this is no desirable approach because we then lose the ability to separate our css classes by components (at least for those classes that need mixins).

Another approach is to import only the mixins e.g.:

@import '../../node_modules/bootstrap/scss/_variables.scss';
@import '../../node_modules/bootstrap/scss/_mixins.scss';

:host {
  @include make-row();
}

This way you only have to include the grid in your root scss file.

Do you guys have any other updates on this issue?