Ruby on Rails

I have the following code in ~/app/assets/stylesheets/application.scss:

/*
* This is a manifest file that'll be compiled into application.css, which will include all the files
* listed below.
*
* Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's
* vendor/assets/stylesheets directory can be referenced here using a relative path.
*
* You're free to add application-wide styles to this file and they'll appear at the bottom of the
* compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
* files in this directory. Styles in this file should be added after the last require_* statement.
* It is generally better to create a new file per style scope.
*
* require_tree .
* require_self
*/

// See
//  https://www.youtube.com/watch?v=vcBXXOdPfgE&index=8&list=PLYM1n9xxMy4ClO2GjX73U3BLsXx9Z7wh5
$navbar-default-bg: red;

// Shnelvar
//   See https://github.com/twbs/bootstrap-sass
@import "bootstrap-sprockets";

// Custom bootstrap variables must be set or imported *before* bootstrap.
@import "bootstrap";

// Shnelvar
//   For ralph-shiny-button etc.
@import "ralph";

// Shnelvar
//   See https://stackoverflow.com/questions/33404154/bootstrap-change-the-navbar-font-size
//   See https://teamtreehouse.com/community/how-do-you-change-the-bootstrap-font-style
.nav a{
   color: white !important;
   // font-size: 3.8em !important;
   font-size: 2.8em;
   }

and the navbar works correctly.


I'd like to add
// See https://getbootstrap.com/docs/4.0/layout/overview/
h1 {
 @include media-breakpoint-only(xs) {
   color: red;
 }
 @include media-breakpoint-only(sm) {
   color: green;
 }
 @include media-breakpoint-only(md) {
   color: blue;
 }
 @include media-breakpoint-only(lg) {
   color: yellow;
 }
 @include media-breakpoint-only(xl) {
   color: orange;
 }
}

but am clueless where to put this code so that h1 changes color as the window size changes

If I place the above Bootstrap media queries at the end of ~/app/assets/stylesheets/application.scss then I get the error:
Undefined mixin 'media-breakpoint-only'.