7
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?

Roy Scheffers
  • 3,832
  • 11
  • 31
  • 36

0 Answers0