Foundation Javascript not working when i use the Mixins in sass Files. How do i set this up?

I am putting all my css in a sass file and i can’t get js to work when doing this. Here is how i have things setup.
This is my layout.cshtml file where i import my compiled sass

head
 link rel="stylesheet" href="~/css/site.css" 
head

at the bottom i have this

    script src="~/lib/jquery/dist/jquery.js"></script
    script src="~/lib/what-input/dist/what-input.js"></script
    script src="~/lib/foundation-sites/dist/js/foundation.js"></script

    script src="~/js/site.js" asp-append-version="true"></script
    script>$(document).foundation();</script
    @await RenderSectionAsync("Scripts", required: false)

My site.scss file looks like this

@import "../lib/foundation-sites/scss/foundation.scss";
@include foundation-everything;
@import "../lib/motion-ui/motion-ui";
@include motion-ui-transitions;
@include motion-ui-animations;
@import "sass/variables/_variables.scss";
@import "sass/Mixins/_Mixins.scss";
@import "sass/ViewModules/Layout/_Layout.scss";

I write all my css in my sass files like this

.hww-main-section-container {  
    @include xy-grid();
}
.hww-tabs-container-wrapper{
    @include xy-cell(12);
    @include breakpoint(medium up){
        @include xy-cell(3);
    }
}
.hww-tabs-container {
    @include tabs-container();
    @include tabs-container-vertical();
}
.hww-tabs-title {
    @include tabs-title();
}
.hww-tabs-content-outer-wrapper{
    @include xy-cell(12);
    @include breakpoint(medium up){
        @include xy-cell(9);
    }
}
.hww-tabs-content-container {
    @include tabs-content();
    @include tabs-content-vertical();
}
.hww-tabs-panel {
    @include tabs-panel();    
}

I am relatively new to foundation.
If i just write the classes in the html file and don’t use the mixins everything works great. Using the mixins in my sass file the JavaScript doesn’t work. Everything else works fine like the grid and so on. What am i missing? Do i need to use the foundation js methods like $('#element').foundation('_openTab', $target) to open and close tabs. If that is the case then why have mixins using js? Am assuming i am not getting some setup somewhere right. I am not using babel and am using asp.net core if that matters. Any help is greatly appreciated. I have been struggling with this for a while. Thanks.

Replace this:

with

$(function() {
  $(document).foundation();
});