Error: no mixin named breakpoint when attempting to stencil push

[TargetRhino]

Expected behavior

stencil push should bundle and upload the new theme to the bigcommerce store

Actual behavior

stencil push returns this error: C:\ProgramData\nvm\v12.22.12\node_modules@bigcommerce\stencil-cli\lib\bundle-validator.js:429 throw new Error( ^

Error: no mixin named breakpoint

   Backtrace:
    stdin:178
    on line 178 of stdin

    @include breakpoint("large") {

-----------------^ : while compiling css files from "C:\Users\Redacted\OneDrive - redacted\Desktop\redacted\assets\scss/fbt.scss"

Steps to reproduce behavior

- Add 6 new font files under assets/fonts both woff and woff2

- Add mixin in assets/scss/fonts :

@mixin termina { @font-face { font-family: 'termina-regular'; src: url('termina-regular-webfont.woff2') format('woff2'), url('termina-regular-webfont.woff') format('woff'); font-weight: normal; font-style: normal; }

@font-face {
    font-family: 'termina-demi';
    src: url('termina-demi-webfont.woff2') format('woff2'),
         url('termina-demi-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'termina-heavy';
    src: url('termina-heavy-webfont.woff2') format('woff2'),
         url('termina-heavy-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

}

- Import fonts in assets/scss/_fonts.scss:

@import "clear-sans"; @import "termina";

$fonts: $fontFamily-sans $fontFamily-serif $fontFamily-mono $fontFamily-headings $fontFamily-hero;

@if contains($fonts, "'Clear Sans', sans-serif") { @include clear-sans; }

@if contains($fonts, "'termina-regular', 'termina-demi', 'termina-heavy'") { @include termina; }

- Add font in base.html file:

    <style type="text/css" media="screen, print">
        @font-face {
            font-family: "termina-heavy";
            src: url("{{cdn '/fonts/termina-heavy-webfont.woff2'}}");
            src: url("{{cdn '/fonts/termina-heavy-webfont.woff'}}");
        }
    </style>
    <style type="text/css" media="screen, print">
        @font-face {
            font-family: "termina-demi";
            src: url("{{cdn '/fonts/termina-demi-webfont.woff2'}}");
            src: url("{{cdn '/fonts/termina-demi-webfont.woff'}}");
        }
    </style>
    <style type="text/css" media="screen, print">
        @font-face {
            font-family: "termina-regular";
            src: url("{{cdn '/fonts/termina-regular-webfont.woff2'}}");
            src: url("{{cdn '/fonts/termina-regular-webfont.woff'}}");
        }
    </style>

    {{ getFontsCollection }}

- Update fonts in theme.scss:

Example:

h1 { color: #4e4e4e; font-family: "termina-heavy"; letter-spacing: .25px; margin-bottom: 0rem; margin-top: 0rem;

- Save and then stencil push

Environment

Stencil-cli version stencil --version: 3.13.0

Node version node -v: v12.22.12

NPM version npm -v: 6.14.16

OS: Windows 11 using VScode