React项目使用SCSS时出现rgba参数必须为颜色的错误如何解决？

报错argument $color of rgba($color, $alpha) must be a color的核心原因是：传递给rgba的第一个参数theme-color('info')没有被正确解析为颜色值，实际返回了非颜色类型的值（比如未执行的函数字符串、undefined）。

具体原因和对应解决方案 #

• 原因1：调用theme-color的作用域内没有导入Bootstrap的theme-color函数
  如果你在React组件内单独导入了_overrides.scss或者variables.scss，没有在导入前先引入Bootstrap的functions.scss，theme-color不会被识别为SCSS函数，会被当做普通字符串处理，传入rgba自然报错。
  解决方案：所有使用了theme-color函数的scss文件，顶部都要先导入@import '~bootstrap/scss/functions';，或者统一在全局scss入口导入所有依赖，不要单独在组件里导入依赖不全的scss片段。

• 原因2：可直接从$theme-colors取值规避函数问题
  如果你不想处理函数导入的问题，可以直接用SCSS原生的map-get方法从自定义的$theme-colors映射里取颜色值，修改_overrides.scss里的对应代码即可：

&.alert-transparent {
  color: map-get($theme-colors, 'info');
  background: rgba(map-get($theme-colors, 'info'), $alert-transparent);
}

• 原因3：确认$alert-transparent变量已正确定义
  虽然当前报错是颜色参数错误，但也要提前确认$alert-transparent变量已经定义，值为0-1之间的数字，避免后续出现变量未定义的报错。

• 额外说明
  你当前的全局scss导入顺序是正确的：先导入Bootstrap函数，再导入自定义变量，再导入完整Bootstrap，最后导入自定义覆盖样式，这样你的自定义$theme-colors会正确覆盖Bootstrap的默认配置，无需调整。

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