1

Background

I have an existing website where I want to import Bootstrap CSS styles. The styles are clashing, so I want to scope the rules.

Example

// node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_modals.scss

.modal {
  display: none;
  overflow: hidden;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
}

// ---

// my-styles.scss

.my-selector {
   @import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap/modals";
}

This results in .my-selector .modal, but I want to have .my-selector.modal.

I want to avoid having to copy-paste the style rules. If I can somehow do it with @extend it would be already great.

Thanks for any suggestions.

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
Sylwester Kardziejonek
  • 562
  • 4
  • 20

1 Answers1

0

I'm not sure that I completely understand the question because // node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_modals.scss is not parent of the current/standard Bootstrap SASS files.

If you're using the latest Bootstrap, _modal.scss contains all the SASS modal source. So, if you wanted to @import all the modal rules/classes (.modal, .modal-header, .modal-body, etc...) to another parent my-selector class it would be...

@import "bootstrap";

.modal.my-selector {
    & {
        @import "bootstrap/modal";
    }
}

SASS Demo: https://codeply.com/p/XjYSfp0s8H

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
  • Thanks for your answer, but this won't work for me. In my case I do not control the element that has the `modal` class. I'm working on a very legacy project that needs to use Bootstrap v3 for now. For the most part I'm able to scope the styles where I can modify the parent element, but in some cases I would like to do some Sass magic, but that does not seem to be possible without special considerations from the creator of an imported file. – Sylwester Kardziejonek Apr 22 '21 at 10:01