I am a beginner in the world of sass and I am trying to incorporate a variable from a file named "_designs.scss" into another file called "_component.scss". Despite my efforts, I keep encountering an "Undefined variable: $grey-light-2" error. I have exhausted all possible solutions but nothing seems to work. Any assistance would be greatly appreciated.
Here is the content of the "_component.scss" file:
@use "designs" as d;
.logo{
height: 3.25rem;
}
.search{
display: flex;
flex: 0 0 40%;
&__input{
width: 90%;
background-color: d.$grey-light-2;
padding: .7rem .2rem;
border-radius: 100px;
border: none;
}
&__button{
outline: none;
}
&__icon{
height: 2.5rem;
width: 2.5rem;
}
}
This is the contents of the "-designs.scss" file:
$color--primary: #eb2f64;
$color--grey-light-1: #faf9f9;
$grey-light-2: #f4f2f2;
$color--grey-light-3: #f0eeee;
$color--grey-light-4: #ccc;