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.
Solution 1 :
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-----------------------*/
#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%;
}Comments
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