Sass编译报错no mixin named breakpoint-down问题求助

错误原因 #

错误核心原因是 SCSS 文件导入顺序不符合编译规则。SCSS 会按照 @import 书写的顺序从上到下依次编译文件：

• 你的主 SCSS 文件首先导入了 _globals.scss，该文件内已经调用了 breakpoint-down、breakpoint-up 两个自定义 mixin
• 但存放这两个 mixin 定义的 _mixins.scss 是在 globals 之后才被导入的，编译 globals 文件时 mixin 还未被定义，因此抛出找不到对应 mixin 的报错。

解决方法 #

调整主 SCSS 文件的导入顺序，遵循「被依赖的公共资源先导入，调用资源的业务文件后导入」的原则：

1. 优先导入变量、mixin 这类公共基础资源
2. 再导入需要调用这些资源的业务文件

调整后的导入配置如下：

@import "variables";
@import "mixins";
@import "globals";
@import "headers";

如果你的 mixin 定义中用到了 variables 文件里的变量，variables 必须放在 mixins 前导入，否则会额外出现变量未定义的报错，上面的调整顺序已经覆盖了该场景。

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