title: Compilation Failure when Making a Production Build with create-react-app v2
body: <pre><code>Creating an optimized production build...
  Failed to compile.
  
  Lexical error on line 1: Unrecognized text.
    Erroneous area:
  1: $progress-size - 2 * $border-size
  ^..^
  </code></pre>
  
  <p>I encounter the above compilation failure when doing a <strong>production build</strong> after <strong>migrating from create-react-app v1 to create-react-app v2</strong>. The local development, i.e: <code>yarn start</code>, is working properly.</p>
  
  <p><strong>NOTE:</strong> I do not encounter this issue in create-react-app v1.</p>
  
  <p>I tried fixing this by using <code>SCSS</code> interpolation, i.e: wrap <code>$progress-size</code> and <code>$border-size</code> with <code>#{}</code> --> <code>#{$progress-size}</code> <code>#{$border-size}</code> and it solves the problems.</p>
  
  <p><a href="https://i.stack.imgur.com/LgoNX.png" rel="noreferrer">Screenshot of the above error message</a></p>
  
  <p>Can anyone explain why I have to fix it like that and if there's a better way?</p>