尝试运行 create-react-app build 时出现非描述性 CSS 解析错误答案

【问题标题】：Getting a non-descript CSS parsing error when attempting to run create-react-app build尝试运行 create-react-app build 时出现非描述性 CSS 解析错误
【发布时间】：2021-02-20 19:29:12
【问题描述】：

我正在使用一个非常基本的 CSS 文件来设置我的 react 应用程序的样式，但是当我尝试在其上运行 npm run build 时，我在第 1 行第 35 列遇到了一个解析错误。

这是导致问题的部分：

@keyframes jiggleLink {
  0%, 100%{
    transform: translate(0px, 0px);
  }
  25%{
    transform: translate(var(--jiggle-skew), 0);
  }
  75%{
    transform: translate(calc(var(--jiggle-skew)*-1), 0);
  }
}

为什么这会导致错误？

【问题讨论】：

build 脚本的作用是什么？
@Anastazy 是create-react-app的内置函数，所以idk

标签： css node.js reactjs create-react-app

【解决方案1】：

问题在于您的最终transform 规则的这个特定片段：)*-1。您需要将运算符与乘数分开，以便编译器正确解析它，因为您使用的负值也可以解释为 - 运算符。

只需将其更改为 )* -1 即可，但为了与 CSS calc 函数的使用方式保持一致（当 + 或 @ 987654326@ 运算符没有被空格包围），这可能更好：

transform: translate(calc(var(--jiggle-skew) * -1), 0);

【讨论】：