如何将scss颜色“导入”到react js组件中？

Question

您好，我在 scss 文件中有一些 scss 颜色定义：

$blue:                            #20a8d8;
$indigo:                          #6610f2 !default;
$purple:                          #6f42c1 !default;

$colors: (
  blue:                           $blue,
  indigo:                         $indigo,
  purple:                         $purple
)

并想在绘制 React js 图表时使用它们：

import React, { Component } from 'react';
import {CardColumns, Card, CardHeader, CardBlock} from "reactstrap";
import {Line} from "react-chartjs-2";

const dataA = {
  labels: ['Week 1', 'Week 2', 'Week 3', 'Week 4'],
  datasets: [
    {
      label: 'Number of Customers in Shop A',
      fill: false,
      lineTension: 0.1,
      backgroundColor: red
    }]
};

我尝试使用“红色”作为背景颜色，但失败并出现错误：

Uncaught ReferenceError: red is not defined

有人能告诉我如何从 scss 导入颜色变量到 React js 吗？