html - Getting an undefined variable error when using ng serve for Sass and Angular

Question

Good Afternoon, I am at a complete loss. I am trying to import variables into my components .scss file from a master variables file called _variables.scss. I am using the @use method and it says that a variable that is defined is not defined. the variables.scss file is in my src folder. I have tried to use the "" in the file extension in the @use statement, I have tried adding the file extension .scss

/* Variables.scss*/
$position: relative;
$position-ab: absolute;
$position-fix: fixed;

$background-color: #1a2d4e;
$color-white: white;
$bright-blue: #00a4b8;

$lora: 'Lora', serif;
$merriweather: 'Merriweather', serif;
$playfair: 'Playfair Display', serif;
$abril: 'Abril Fatface', cursive;

$z-index-10: 10;
$x-index: 1;

$zoom: 1;
$zoom-7: .7;
$zoom-8: .8;

$width: 100%;
$height: 100%;
$height-i: inherit;
$dp-inline: inline-block;
$dp-none: none;

/* about component.scss */

@use "../../variables";

/*ABOUT-----------------------*/
#about, .web-col, .wordpress, .web-row-contain,.consulting{
   height: $height-i;
    box-shadow: 0px 3px 2px 1px lightgrey;
    border-radius: 5px;
    background: #f8f8f8;
}

#about {
   position: $position;
    top: 440px;
    left: 5%;
    width: 40%;
    height: 500px;
    zoom: 1.1;
    overflow-x: hidden;
    overflow-y: scroll;
    z-index: $z-index;
    background: #F0F0F0;
}


h1 {
    font-family: $abril;
    padding-top: 10px;
}

#about-chevron {
   position: $position;
    bottom: 100px;
    left: 37%;
    width: 40%;
    height: 120px;
    z-index: $z-index;
}


.about-link {
   position: $position;
    top: -400%;
    left: 19.5%;
}  

.about-me-content {
   position: $position;
    left: 34%;
}
   #about-image {
   position: $position;
    top: 2%;
    left: 33%;
    zoom: .07;
}



.about-description {
   position: $position; 
    top: 9%;
    padding-left: 5%;
    line-height: 1.6;
    font-family: 'Peddana', serif;
    font-size: 16px;
    margin: 0px 5% 0px 5%;
   color: black;
}


.about-chev {
    padding-left: 45%;
}

question from:https://stackoverflow.com/questions/65603099/getting-an-undefined-variable-error-when-using-ng-serve-for-sass-and-angular

Answer 1

You can try using @import "../../variables" instead of @use "../../variables".

The thing is that @use is only available for Dart Sass, while @include is available in both Dart Sass and Node Sass.