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

编译器很好

不管那里有什么纱线，第一根纱线的建立都会失败

1 个答案: