Material Design Tab-Indicator Sass混合宏underline-color未定义编译报错求助

我刚踩过这个坑，你的问题核心是没有正确导入包含underline-color混合宏的Sass模块。MDC的Sass结构和你想的有点不一样，咱们一步步来修正：

问题根源 #

你当前导入的是@material/tab-indicator/mdc-tab-indicator——这是MDC预编译好的CSS类对应的Sass文件，它只输出现成的样式，并没有暴露underline-color这类自定义混合宏。真正包含这个混合宏的是@material/tab-indicator的主模块。

修正步骤 #

1. 替换导入语句 #

把原来的：

@use "@material/tab-indicator/mdc-tab-indicator";

替换成主模块导入（可以指定命名空间避免冲突）：

@use "@material/tab-indicator" as tab-indicator;

2. 正确调用混合宏 #

现在调用混合宏时需要加上命名空间：

.mdc-tab-indicator {
  @include tab-indicator.underline-color(orange);
}

如果你觉得命名空间麻烦，也可以用全局导入的方式（不推荐，容易冲突，但适合快速测试）：

@use "@material/tab-indicator" as *;

.mdc-tab-indicator {
  @include underline-color(orange);
}

额外检查点 #

• 确认你的@material/tab-indicator npm包是最新版本，旧版本可能存在模块结构差异
• 确保所有MDC相关模块的@use语句都正确，比如tab-bar、tab等模块的依赖都已导入

这样修改后，你的Sass应该就能正常编译，underline-color混合宏也能生效了。

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