css - 当 sass 同时使用 calc 和 var 时，React 构建失败

Question

我正在使用 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.

Answer 1

这在包含 calc() 来计算减法和运算符之间包含空格时有效。

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