html - 由于 css 中的 calc(width)，React 应用程序中的“npm run build”失败？

Question

我正在构建一个带有来自 Bootstrap 的进度条的 React 应用程序。

<div className="progress">
  <div className="progress-bar"
    role="progressbar"
    aria-valuenow="60"
    aria-valuemin="0"
    aria-valuemax="100"
    style={{ width: "60%" }}
  />
</div>

和 CSS

.progress {
  height: 5px;
  background-color: #9c9c9c; }

.progress-bar {
  height: 5px;
  background-color: blue;
  animation: animated-progress 3s ease-out; }

@keyframes animated-progress {
  from {
    width: 0; }
  to {
    width: calc(width); } }

这是codesandbox中的完整代码

我得到了从这个 StackOverflow答案calc(width)中获取元素宽度的想法

它在开发过程中运行良好。但是，当我运行npm run build生产命令时，出现以下错误

Lexical error on line 1: Unrecognized text.
  Erroneous area:
1: width
^..^
CompileError: Begins at CSS selector undefined


npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! personal-site@0.1.0 build: `react-scripts build`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the personal-site@0.1.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:

我知道这个错误是由 引起的，因为如果我从 更改为calc(width)，我就能够构建。正如您可能意识到的那样，做类似的事情并不是硬编码宽度的好方法。calc(width)calc(60%)calc(60%)

标签： htmlcssreactjs

Answer 1

错误说明了一切。width不被识别，即它不存在。这就是为什么当你传入一个值时它会起作用。如果要使用css 变量，则必须声明它。

width: calc(width);基本上，width:calc(undefined);

此外，对宽度进行硬编码不一定是坏事。与编程中的大多数事情一样，这取决于.

编辑

将值传递给 calc 没有任何意义。calc 对于计算表达式很有用，例如calc (50% - 10px). 如果你要传递一个百分比，只需设置百分比。

对评论的回应

我不相信它按照您的建议工作，但它不会轰炸您的页面。在您的沙箱中，我这样做了：

@keyframes animated-progress {
  from {
    width: 0;
  }
  to {
    width: calc(thisDoesNotActuallyWork);
  }
}

页面看起来一样。没有控制台错误，没有白屏——它看起来像这样：

这是使用时的样子width。

我向您保证，如果您不声明变量并将其设置为某个值，代码往往无法工作。不过，它如何失败取决于。