Sass: How to merge nested import selectors with parent selector?

Question

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.

Answer 1

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