reactjs - React SCSS：`rgba（$color，$alpha）`的参数`$color`必须是颜色

Question

我正在用 SCSS 构建一个反应应用程序。

使用以下_variables.scss和_overrides.scss文件，我收到以下错误：argument $color of rgba($color, $alpha) must be a color. 我对反应中的 SCSS 相当陌生，所以我不确定如何解决这个问题。

变量.scss

$white:    #fff !default;
$gray-100: #f8f9fa !default;
$gray-200: #e9ecef !default;
$gray-300: #d6dee5 !default;
$gray-400: #c1ccd3 !default;
$gray-500: #a3aeb7 !default;
$gray-600: #798892 !default;
$gray-700: #495057 !default;
$gray-800: #3c484f !default;
$gray-900: #29323a !default;
$black:    #000 !default;
$gray-light: $gray-100 !default;

$blue:         #005792 !default;
$indigo:       #7f3ddb !default;
$purple:       #1A86D0 !default;
$pink:         #e54e9a !default;
$red:          #E30613 !default;
$orange:       #ff7d47 !default;
$yellow:       #FDA700 !default;
$green:        #68ca66 !default;
$teal:         #21AE8C !default;
$cyan:         #17a2b8 !default;
$dark-gray:    #D7DFE6 !default;
$gray-inverse: #002B49 !default;
$subtle-white: #EAF0F6 !default;

$theme-colors: (
  primary: $red,
  secondary: $gray-600,
  success: $teal,
  info: $purple,
  warning: $yellow,
  danger: $orange,
  dark: $gray-800,
  inverse: $gray-inverse,
  gray: $gray-300,
  light: $gray-100,
  default: #e9ecef,
  primary-light: #dee4ee,
  success-light: #ecfaec,
  info-light: #f2fafa,
  warning-light: #fdf7e6,
  danger-light: #fff2ef,
);

变量.scss

.alert-info {
  background: theme-color('info');
  color: $white;

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

  .btn:not(.btn-default) {
    background: rgba($white, 0.8);
    color: theme-color('info');
  }
}

主题.scss

@import '~bootstrap/scss/functions';
@import 'variables';
@import '~bootstrap/scss/bootstrap';
@import 'overrides';

谁能确定可能是什么问题？非常感谢您的帮助。

标签： reactjstwitter-bootstrapsass