Unable to scroll modal when bootstrap is namespaced

Created by: jdanil

Our app currently namespaces bootstrap so that our styles don't affect other areas. Something like this...

.app {
  @import '~bootstrap/scss/bootstrap';
}

The style in _modal.scss that displays the scrollbar is this.

.modal {
  .modal-open & {
    overflow-x: hidden;
    overflow-y: auto;
  }
}

In our app, this evaluates to .modal-open .app .modal, so the style is not applied. On top of that, it is unintuitive to read. @mdo pointed out this could be a potential issue when it was submitted.

Testing in SassMeister with this block of code...

.app {
  .modal {
    .modal-open & {
      overflow-x: hidden;
      overflow-y: auto;
    }
  }
}

...outputs the following compiled css.

.modal-open .app .modal {
  overflow-x: hidden;
  overflow-y: auto;
}