SCSS通过@use+@forward引入Mixin报未定义错误如何解决

问题原因 #

你遇到的报错是因为混淆了 @forward 和 @use 两个规则的作用：

• @forward 的功能是中转导出目标模块的成员，仅会将转发的内容暴露给后续引入当前文件的其他文件，不会把这些成员加载到当前文件的作用域中，因此你在 home.scss 内部直接调用 flexCenter mixin 会提示未定义。
• 废弃的 @import 规则是直接把所有引入内容注入到全局作用域，没有作用域隔离，所以可以直接调用，但也因此会带来全局命名冲突等问题。

修复方案 #

方案1：仅当前文件使用上层样式，不需要中转导出 #

直接把 home.scss 里的 @forward 替换为 @use 即可，代码如下：

// 注意加 as * 把上层 index 暴露的所有成员引入到当前全局作用域
@use '../' as *; 

.landing-section{
    @include flexCenter(row);
    height:100vh;
}

如果不想污染当前文件的全局作用域，也可以指定命名空间使用：

@use '../' as base; 

.landing-section{
    @include base.flexCenter(row);
    height:100vh;
}

方案2：需要同时中转导出+当前文件使用 #

同时保留 @forward 和新增 @use 即可，两者互不冲突：

@forward '../'; // 中转导出给其他引入 home.scss 的文件使用
@use '../' as *; // 加载到当前文件作用域供内部使用

.landing-section{
    @include flexCenter(row);
    height:100vh;
}

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