Error: no mixin named breakpoint in BigCommerce custom.scss file

Question

So I'm using BigCommerce's StencilCLI and I randomly started to get a error popping up pointing to my custom sass file. It's pointing to the following code:

.container {
    @include breakpoint("medium") {
        max-width:106rem;
    }
    @include breakpoint("large") {
        padding: 0 3rem;
    }
}

which gives me the following error when I push it to github,

Validating theme...
/opt/hostedtoolcache/node/12.22.12/x64/lib/node_modules/@bigcommerce/stencil-cli/lib/bundle-validator.js:429
                throw new Error(
                      ^

Error: no mixin named breakpoint

       Backtrace:
        stdin:25
        on line 25 of stdin
>>     @include breakpoint("medium") {
   -------------^
:  while compiling css files from "/home/runner/work/maz/maz/assets/scss/_custom.scss".
    at BundleValidator._validateCssFiles (/opt/hostedtoolcache/node/12.22.12/x64/lib/node_modules/@bigcommerce/stencil-cli/lib/bundle-validator.js:429:23)
Error: Process completed with exit code 1.

I've read plenty of things when researching this error code about importing the mixin, but i'm not sure where to put it, or why I need to do that or if it is already done. It didn't always throw this error and plenty of other scss files use the same @include breakpoint("large/medium/small") code in their files but none of them throw the error at all.

The closest file I can find that looks like it import the breakpoint mixin is this javascript file:

const breakpointSizes = {
    large: 1261,
    medium: 876,
    small: 551,
};

Any help with an explanation of what I need to do would be helpful, the more descriptive the better.