Some time ago, I worked on a create-react-app built project and encountered no problems with the development environment. However, I encountered the following build errors during the final packaging:After gradual investigation, the section in the style was finally located:

 margin-bottom: calc((var(--vertical-size)) * -1);
Copy the code

I recompile by commenting out lines of code used by both calc and VAR.

Locating the problem is easy, then we will find a solution:

The solution

The easiest way to do this is to change the var variable to the sass declared variable

   $vertical-size:8px;
   margin-bottom: calc(($vertical-size * -1);
Copy the code

A small amount of this scheme can also, more words, have to consider from the packaging and compilation level of processing, if there is a better scheme, welcome to leave a message ~….

Reference document

  • Developer.mozilla.org/en-US/docs/…

  • www.sass.hk/docs/