SCSS从@import迁移至@use时出现mixin未定义错误的排查求助

看起来你遇到的核心问题是循环依赖加上模块引用不规范，还有一处函数名的小错误，咱们一步步拆解解决：

问题根源 #

1. 循环依赖冲突：你的_mixins.scss通过@use引入了_global.scss，而_global.scss又试图使用_mixins.scss里的vp-medium mixin。编译时_global.scss会先被处理，但此时它并没有引入_mixins.scss，同时_mixins又依赖_global的变量，形成了死循环，导致vp-medium无法被找到。
2. 函数名不匹配：_mixins.scss里定义的断点函数是bp($bp)，但_global.scss里调用的是breakpoints(small)——这本身也会导致函数未定义的隐性错误，只是当前的mixin报错先暴露出来了。
3. 模块未按需引入：_global.scss使用了vp-medium mixin，但没有通过@use引入包含该mixin的模块，自然找不到它。

修复步骤 #

1. 拆分循环依赖，抽离基础断点模块 #

首先把共享的断点变量和函数单独放到一个独立文件里，避免mixins和global互相依赖：

创建b_settings/_breakpoints.scss：

$breakpoints: (
  'small': 767px,
  'medium': 1024px,
  'navigation': 840px,
);

@function bp($bp) {
  @return map-get($breakpoints, $bp);
}

2. 调整_mixins.scss的依赖 #

现在mixins只需要依赖新的断点模块，不需要再引入global：

@use '../b_settings/breakpoints' as *;

@mixin vp-medium {
  @media (min-width: #{bp(small) + 1}) and (max-width: #{bp(medium)}) {
    @content;
  }
}

3. 修正_global.scss的引用与函数调用 #

让global主动引入mixins模块，同时把错误的breakpoints()调用改成正确的bp()：

@use '../a_tools/mixins' as *;
@use './breakpoints' as *;

:root {
  --vp-name: small;
}

@include vp-medium {
  :root {
    --vp-name: medium;
  }
}

4. 保持其他文件不变 #

_test.scss和styles.scss的代码可以原样保留，现在依赖链已经清晰：

• styles.scss → _test.scss → _mixins.scss & _global.scss
• _global.scss → _mixins.scss & _breakpoints.scss
• _mixins.scss → _breakpoints.scss

为什么这样有效？ #

• 拆分独立的断点模块后，彻底消除了mixins和global之间的循环依赖，每个模块只依赖更基础的工具/变量模块。
• 正确引入所需模块后，_global.scss就能找到vp-medium mixin了。
• 修正函数名和实现后，断点值的获取才能正常工作（之前的@return ($breakpoints, $bp)写法也是错误的，应该用map-get来获取map中的值）。

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