Creating an optimized production build...
Failed to compile.
Lexical error on line 1: Unrecognized text.
  Erroneous area:
1: $progress-size - 2 * $border-size
^..^
I encounter the above compilation failure when doing a production build after migrating from create-react-app v1 to create-react-app v2. The local development, i.e: yarn start, is working properly.
NOTE: I do not encounter this issue in create-react-app v1.
I tried fixing this by using SCSS interpolation, i.e: wrap $progress-size and $border-size with #{} --> #{$progress-size} #{$border-size} and it solves the problems.
Screenshot of the above error message
Can anyone explain why I have to fix it like that and if there's a better way?
 
    