Sass变量未定义求助：跨文件调用$grey-light-2变量报错

问题排查与解决步骤： #

• 检查文件路径匹配
  确认_designs.scss和_component.scss处于同一目录下，@use "designs" as d;的路径才会生效。如果文件不在同一目录，需要调整路径，比如@use "./path/to/designs" as d;（用相对路径指向正确位置）。

• 核对变量名一致性
  你的_designs.scss中目标变量是$grey-light-2，而其他变量都带有color--前缀，确认是否是笔误：

  • 若变量名就是$grey-light-2，确保_component.scss中调用的d.$grey-light-2完全匹配；
  • 若实际想使用带前缀的变量，把_designs.scss里的$grey-light-2改为$color--grey-light-2，同时_component.scss中对应修改为d.$color--grey-light-2。

• 兼容旧版Sass语法
  如果你的Sass版本低于1.23.0，@use语法不被支持，换成传统的@import：
  在_component.scss顶部替换为：

  @import "designs";
  

  之后直接使用变量，无需命名空间：

  background-color: $grey-light-2;
  

修正后的示例代码（以保持原变量名、使用@use为例）： #

_designs.scss（确保变量名无笔误）：

$color--primary: #eb2f64;
$color--grey-light-1: #faf9f9;
$grey-light-2: #f4f2f2;
$color--grey-light-3: #f0eeee;
$color--grey-light-4: #ccc;

_component.scss（路径正确的前提下）：

@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;
  }
}

内容的提问来源于stack exchange，提问作者Anonymousss