Solution 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.

Problem :

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, .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%;


Comment posted by augdog97

It compiled, thank you. Do you know the best way to include custom js files? I have a script tag in my index.html file and I added it to the script array in the angular.json.

Comment posted by tsopeh

Sorry, I’m not sure. It would be best if you opened another question, or looked for a similar project on github and figure something out from there