I am new to sass and want to use a variable stored in a file named "_designs.scss". I want to use this variable in a file named "_component.scss". But I am getting "Undefined variable: "$grey-light-2" error. I have tried everything, but nothing is working, please help.

Below is 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 "-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;

CodePudding user response：

Two things I can think of:

1. Check the path (i.e., @use "../../your/path/to/designs";).
2. If you're using Visual Studio Code extension for compilation, use the one by Glenn Marks.

EDIT

You should rename _component.scss to component.scss.

According to the SASS official website:

A partial is a Sass file named with a leading underscore. You might name it something like _partial.scss. The underscore lets Sass know that the file is only a partial file and that it should not be generated into a CSS file.