Import SCSS variable to JS/JSX

colors.scss

// Sometimes you want to share some variables between your SCSS and JS/JSX code
// To do this, you can levarage the :export command in SCSS.

$alertInfo: #b8d3e8;
$alertWarning: #fdf9c3;
$alertSuccess: #cfc;
$alertError: #e63f3f;

// this exports the variable to be available in JS
:export {
  alertInfo: $alertInfo;
  alertWarning: $alertWarning;
  alertSuccess: $alertSuccess;
  alertError: $alertError;
}

notification.jsx

// just import scss file like a normal import statement
import { alertInfo, alertWarning, alertSuccess, alertError } from './colors.scss'

const info = () => <Icon type="info" color={ alertInfo } />
const warning = () => <Icon type="warning" color={ alertWarning } />
const success = () => <Icon type="success" color={ alertSuccess } />
const error = () => <Icon type="error" color={ alertError } />