Restrict style to the IA

[cyChop]

Make sure the style does not apply outside the IA by using a root container.

This messes with the building of the stylesheet, though.

[cyChop]

Not done...

[cyChop]

Tried moving @import "bootstrap"; inside .beverages-container but this causes the style to break.

The stylesheet causing the style to break is node_modules/bootstrap/scss/reboot. This needs to be imported at the root of the stylesheet.

This is obviously a problem as it may break the main page style. Moving out of bootstrap would have other consequences we may not wish to face right now.

If no solution can be found, this plugin should be published with a warning that it may break the page's style, but it's not clean.

For any following on this topic, the following works (for the plugin at least):

@import "variables";
//@import "bootstrap";

// Core variables and mixins
@import "node_modules/bootstrap/scss/variables";
@import "node_modules/bootstrap/scss/mixins";

// Reset and dependencies
@import "node_modules/bootstrap/scss/normalize";
@import "node_modules/bootstrap/scss/print";

// Core CSS
@import "node_modules/bootstrap/scss/reboot";

.beverages-container {
  @import "node_modules/bootstrap/scss/type";
  @import "node_modules/bootstrap/scss/grid";
  @import "node_modules/bootstrap/scss/buttons";

  // Components
  @import "node_modules/bootstrap/scss/animation";
  @import "node_modules/bootstrap/scss/dropdown";
  @import "node_modules/bootstrap/scss/button-group";
  @import "node_modules/bootstrap/scss/labels";
  @import "node_modules/bootstrap/scss/alert";

  // Components w/ JavaScript
  @import "node_modules/bootstrap/scss/tooltip";

  // Utility classes
  @import "node_modules/bootstrap/scss/utilities";
  @import "node_modules/bootstrap/scss/utilities-responsive";

  @extend .container-fluid;
  padding: 7px;
   // ...
}

[cyChop]

This will remain a known and open bug for now.

[cyChop]

How about dropping Bootstrap and do everything from start?