Use sass-extract to get JS object from sass variables

extractSassToJs.js

/* eslint-disable import/no-webpack-loader-syntax */
import mapValues from 'lodash/mapValues';

const style = require('sass-extract-loader!./colors.scss');

function getSassValue(sassVar) {
  const {type,value} = sassVar;
  switch (type) {
    case 'SassString':
    case 'SassBoolean':
    case 'SassNull':
      return value;

    case 'SassNumber':
      return sassVar.unit ? `${value}${sassVar.unit}` : value;

    case 'SassColor':
      const {r,g,b,a} = value;
      return `rgba(${r}, ${g}, ${b}${a !== 1 ? `, ${a}` : ''})`;

    case 'SassList':
      return value.map(getSassValue).join(' ');

    case 'SassMap':
      return mapValues(value, getSassValue);

    default:
      return value;

  }
}

const globalStyles = style.global || {};

export default mapValues(globalStyles, getSassValue);