Custom SCSS files not working on Bigcommerce Stencil

Question

I imported the custom SCSS files in the theme.scss but files are still not working

in theme.scss: @import "mixins";

This should import my custom scss file named: _mixins.scss file which is is the same directory of theme.scss but it isn't working I keep on getting an error on my _navPages.scss that mixin are not defined... even though I defined them in that _mixins.scss file

Please advise....

file structure image Example for mixin in my _navPages.scss:

@include for-phone-only {
 //@media (min-width: 321px) { @content; }
  grid-template-areas: "burger logo icons";
 grid-template-columns: 40px 1fr 40px;
}

Example for the defined mixin in my _mixins.scss:

 @mixin for-phone-only {
    @media (min-width: 321px) { @content; }
  }