React JS 中的 Sass 构建失败

Question

I have following Sass script:

@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;
}

When I try to run the build file in react using yarn build ( "build": "react-scripts build", ), I get an error:

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

My node-sass version is "node-sass": "4.14.1" . How do I get rid of this irritating error to proceed with my build?

Answer 1

You need to include $ before your variable. I believe this is missed out for the two variables used inside calc function

Try

@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;
}

Ref:- https://sass-lang.com/documentation/interpolation