'Override Bootstrap class with scss, but only when the Bootstrap class is nested under a custom class

I'd like to customize a Bootstrap class (btn, in the following example), but only when it's nested under my own class (banner-message, in the following example):

<div class="banner-message">
  <button class="btn btn-primary">Click Me!</button>
</div>

This is the SCSS (live demo):

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

.banner-message {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  text-align: center;
  width: 300px;
  
  btn {
    border-radius: 8px;
    color: orange;
  }
}

I tried following this answer, and enclose my classes' file with the following, but it didn't work:

@import "bootstrap/btn";

... my classes' definitions

@import "bootstrap";


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source