Sass 在 React JS 中构建失败

Question

我有以下 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",) 运行构建文件时，我得到一个错误：

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"。如何摆脱这个恼人的错误以继续我的构建？

Answer 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

Sass 在 React JS 中构建失败

Sass build failing in React JS

css

sass

npm-scripts