React JS 中的 Sass 构建失败答案

【问题标题】：Sass build failing in React JSReact JS 中的 Sass 构建失败
【发布时间】：2021-07-11 07:46:54
【问题描述】：

我有以下 Sass 脚本：

@import "../../../../global_css/variables/variables";
.heading .sectionAbout {
    padding: $padding-top-viewport 0;
    margin-top: calc(-1 * (#{top-viewport-height} - #{clip-background-height}));
    background: $color-grey-light-1;
}

当我尝试使用 yarn build ("build": "react-scripts build",) 在 react 中运行构建文件时，出现错误：

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

Lexical error on line 1: Unrecognized text.
  Erroneous area:
1: -1 * (top-viewport-height - clip-background-height)
^........^
CompileError: Begins at CSS selector undefined

我的node-sass 版本是"node-sass": "4.14.1"。如何摆脱这个恼人的错误以继续我的构建？

【问题讨论】：

'$' 在 top-viewpost-height 和 clip-background-height 变量之前跳过。 sass-lang.com/documentation/interpolation

标签： css sass npm-scripts

【解决方案1】：

您需要在变量前包含 $。我相信这是因为 calc 函数中使用的两个变量而错过了

试试

@import "../../../../global_css/variables/variables";
.heading .sectionAbout {
    padding: $padding-top-viewport 0;
    margin-top: calc(-1 * (#{$top-viewport-height} - #{$clip-background-height}));
    background: $color-grey-light-1;
}

参考：-https://sass-lang.com/documentation/interpolation

【讨论】：