title: Error: no mixin named breakpoint in BigCommerce custom.scss file
body: <p>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:</p>
  <pre><code>.container {
      @include breakpoint(&quot;medium&quot;) {
          max-width:106rem;
      }
      @include breakpoint(&quot;large&quot;) {
          padding: 0 3rem;
      }
  }
  </code></pre>
  <p>which gives me the following error when I push it to github,</p>
  <pre><code>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
  &gt;&gt;     @include breakpoint(&quot;medium&quot;) {
     -------------^
  :  while compiling css files from &quot;/home/runner/work/maz/maz/assets/scss/_custom.scss&quot;.
      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.
  </code></pre>
  <p>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(&quot;large/medium/small&quot;) code in their files but none of them throw the error at all.</p>
  <p>The closest file I can find that looks like it import the breakpoint mixin is this javascript file:</p>
  <pre><code>const breakpointSizes = {
      large: 1261,
      medium: 876,
      small: 551,
  };
  </code></pre>
  <p>Any help with an explanation of what I need to do would be helpful, the more descriptive the better.</p>