Beginner at compiling .SCSS into .CSS - $primary variable does not seem to be "declared" (defined) during compilation.

I am auto-compiling my .scss files during the build process and now I am being prevented from debugging due to the errors encountered:

  &:focus {
    box-shadow: none;
    transition: all 0.1s linear;
    border-color: $primary;
    box-shadow: inset 0px 0px 0px 1px $primary;
  }

Select allOpen in new window

I did a search for "$primary" and I found this:

and I see sections of code like this:

$theme-colors: () !default;
$theme-colors: map-merge((
  "primary":    $primary,
  "secondary":  $secondary,
  "success":    $success,
  "info":       $info,
  "warning":    $warning,
  "danger":     $danger,
  "light":      $light,
  "dark":       $dark
), $theme-colors);

Select allOpen in new window

Where it would seem that $primary IS being declared and defined.

I cannot seem to find any reason in the code for this error message.

How do I fix this so the compiler sees $primary being defined?

I know .SCSS kind of uses a compilation "tree" where items get defined lower in the tree, so-to-speak, and then get "rolled-up" into single .scss files which then get compiled into a CSS file, ultimately.

Files with an "_" do not get compiled, per se.  They are what gets rolled-up into a single ".scss" parent which THEN gets compiled into a final ".css" file of the same name.  For example, "bootstrap.scss" gets compiled into "bootstrap.css".

But this one has me stumped.