title: Migrating to Styled-Components with global SASS variables in React
body: <p>I'm trying to slowly introduce Styled-Components into my existing codebase which relies heavily on global SASS variables (partials imported into a <code>main.scss</code>).</p>
  
  <p>How do I reference the SCSS variables? The following doesn't work:</p>
  
  <pre><code>import React from 'react';
  import styled from 'styled-components';
  
  const Button = styled.button`
    background-color: $color-blue;
  `;
  
  export default Button;
  </code></pre>
  
  <p>Am I approaching this from the wrong way?</p>