SCSS file is not being applied to my HTML webpage - html

Question

I created a simple network of HTML pages styled with SCSS but the SCSS rules aren't being applied!
Heres how my SCSS file looks like:
//SCSS variables
$Heading-size: 60px;
$Mobile-Heading-size: 40px;
$Mobile-Body-Size: 30px;
$Defualt-background: rgba(149, 149, 243, 0.616);
//SCSS Inheritance and .class selector
.nav{
#extend h1;
}
img{
width: 250px;
}
body {
color: black;
background-color: $Defualt-background;
font-family: Arial, Helvetica, sans-serif;
font-weight: normal;
//SCSS Nesting
h1 {
text-align: center;
size: $Heading-size;
color: tomato;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
background-color: $Defualt-background;
}
}
table {
border-radius: 5px;
border-width: 5px;
th {
border-width: 4px;
}
td {
border-width: 2px;
}
}
//responsive #media query
#media only screen and (max-width: 768px){
h1 {
size: $Mobile-Heading-size;
}
body {
//The background is a test to see if it works :)
$Defualt-background: orange;
background-color: $Defualt-background;
size: $Mobile-Body-Size
}
}
And this is how I linked it to my html:
<link rel="stylesheet" href="./CSS/style.css">
Just to be clear im linking the CSS generated by my compiler not the original SCSS!