無論那里有什么，紗線構建都會在第一行失敗

Question

我有一個用 create-react-app 引導的反應項目，但遇到了一個構建錯誤，我真的無法擺脫它。

該項目包括兩個 css 文件，一個index.css ，第二個是overrides.css ，這也是編譯器抱怨的文件。 兩者都包含在index.js 。

現在，當我在項目目錄中運行yarn build時，出現以下編譯器錯誤：

maxi@tuerkasten:~/projects/calendar-ui$ yarn build
yarn run v1.22.10
warning package.json: No license field
$ react-scripts build
Creating an optimized production build...
Failed to compile.

./src/overrides.css
ParserError: Syntax Error at line: 1, column 15


error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
maxi@tuerkasten:~/projects/calendar-ui$

這就是overrides.css現在的樣子：

.ui.celled.grid > .column:not(.row),
.ui.celled.grid > .row > .column.no-padding {
  padding: 0;
  min-height: 14vh;
}

/* @todo: find a way to solve this more elegant */
.ui.celled.grid > .column:not(.row),
.ui.celled.grid > .row > .column.no-min-height {
  min-height: 5vh;
  font-weight: 700;
  padding: 5px;
}

/* calendar days without month */
.calendar-day.notfirstday {
  width: 30.08px;
  height: 30.08px;
}

.ui.menu:not(.vertical) .right.item.no-padding-margin {
  margin: 0 !important;
  padding: 0 !important;
}

.ui.container.backend-container {
  margin-left: calc(var(auto)+200px) !important;
  margin-top: calc(var(auto)+50px) !important;
}

/* remove require asterisk */
.ui.form .required.field > .checkbox.remove-require:after {
  content: '';
}

奇怪的是，無論我在overrides.css行做什么，錯誤都保持不變，開發服務器yarn start運行良好。

Answer 1

似乎編譯器不喜歡 css calc 函數中沒有空格。

我剛剛改變了這個

.ui.container.backend-container {
  margin-left: calc(var(auto)+200px) !important;
  margin-top: calc(var(auto)+50px) !important;
}

到那個

.ui.container.backend-container {
  margin-left: calc(var(auto) + 200px) !important;
  margin-top: calc(var(auto) + 50px) !important;
}

編譯器很好