如何将'scss颜色'导入'反应js组件？

Question

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

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

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

并且想在绘制反应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
    }]
};

我尝试使用'red'作为backgroundColor，但因错误而失败：

Uncaught ReferenceError: red is not defined

有人可以告诉我如何从scss导入颜色变量来反应js吗？