React JS 中的 Sass 構建失敗

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", ) 在 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" 。 我如何擺脫這個惱人的錯誤以繼續我的構建？

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