SCSS Variables not found in child component in React

I'm refactoring some of my SCSS structure, and it seems my variables are giving me some trouble in my new React app. Variables are compiling as "unknown" in components when I try starting the app.

Here is some background on scss variables: https://webdesign.tutsplus.com/articles/understanding-variable-scope-in-sass--cms-23498

And a related quesion: SASS - use variables across multiple files

Here's basically what my app looks like:

src/

• App.js/App.scss

• partials/

  • _breakpoints.scss
  • etc...

• components/

  • content/

    • text.js/text.scss

App.scss

@import 'partials/breakpoints';
@import 'partials/otherStuff';

_breakpoints.scss

$lg: 992px;

text.scss

...
    @media screen and (max-width: $lg) { ... }
...

According to the docs from SCSS, if you define your variables first-thing in your main stylesheet, other components should be able to see the variables. So if that's the case, what could I be doing wrong here?

https://sass-lang.com/documentation/variables#scope

Variables declared at the top level of a stylesheet are global. This means that they can be accessed anywhere after they’ve been declared—even in another stylesheet!

Update: Is what I'm trying to do more of a mixin thing? As far as I know using mixins isn't needed for sharing variables across your website, unless I'm mistaken.