Sass 在 React JS 中构建失败
Sass build failing in React JS
我有以下 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"
。如何摆脱这个恼人的错误以继续我的构建?
您需要在变量前包含 $。我相信 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;
}
我有以下 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"
。如何摆脱这个恼人的错误以继续我的构建?
您需要在变量前包含 $。我相信 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;
}