当 sass 一起使用 calc 和 var 时，React 构建失败

Posted 2023-03-06

【中文标题】当 sass 一起使用 calc 和 var 时，React 构建失败

【英文标题】：React build fails when sass uses calc and var together

【发布时间】：2019-11-06 17:49:06

【问题描述】：

我正在使用 create-react-app 来构建我的应用程序，当我在开发模式下运行它时，它可以正常工作，没有任何错误或警告。当我在 sass 中同时使用 calc 和 var 时，如何在终端上运行 npm run build 时出现构建错误。

transform: translate(calc((var(--i) -1)*-100%));

当我取消注释提到的代码时，构建不会失败，所以我假设这就是问题所在。

这很奇怪，因为当我运行 npm start 时它可以完美运行。

错误信息如下。

yarn run v1.16.0
$ react-scripts build
Creating an optimized production build...
Failed to compile.

./src/styles/core.scss
ParserError: Syntax Error at line: 1, column 31


error Command failed with exit code 1.

【问题讨论】：

你能发布错误信息吗？

我对sass不熟悉，但是calc里面的操作符周围不应该有空格吗？

有一个issue for this on create-react-app's GitHub。

【参考方案1】：

内部 SASS 变量用 $ 声明，而不是 var(--i)。 此外，您必须用空格将数字与 + 运算符分开。例如，您必须写 - 1 而不是 -1。

查看有关 calc function 的文档。

另外，您可以查看documentation about numeric operators in SASS。

【讨论】：

我正在使用 javascript 动态更改 --i 的值。如果我使用 $ 创建变量，我将无法用 js 更改它吗？

你不能这样做。检查这些问题sass variables。和css values with javascript

如果您打算通过 react 定期更改 css 值，您可以查看 css-modules 或 styled-components 之类的内容，看看它是否更适合您。

【参考方案2】：

当包含 calc() 来计算减法以及在运算符之间包含空格时，此方法有效。

transform: translate(calc(calc((var(--i) - 1)) * -100%));

【讨论】：

另外，请确保不要缩小空格。我们收到此错误是因为 Bootstrap's (already minified) CSS（有空格）再次被缩小，删除了重要的空格。

【参考方案3】：

对 sass 变量使用 #$i 而不是 var(--i)

transform: translate(calc( (#$i - 1) * -100% ));