How to 'import' scss colors into react js component?

Question

Hi I have some scss color definitions in scss file:

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

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

And would like to use them when drawing react js charts:

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
    }]
};

I tried to use 'red' for backgroundColor but failed with error:

Uncaught ReferenceError: red is not defined

Can anybody please tell me how to import color variables from scss to react js?