如何在 JavaFX CSS 样式表中正确使用变量？

Question

我正在使用 JavaFX 构建一个小型密码管理器，目前正在努力使更改颜色主题变得容易。为此，我声明了包含不同颜色十六进制代码的变量，并将它们保存在名为“utility.css”的样式表中。此样式表在两个不同的样式表中导入，变量如 here.

所述调用

不知何故我在解析时遇到这个错误：

Feb. 21, 2023 5:32:48 PM javafx.css.CssParser parse
WARNING: CSS Error parsing file:/G:/.../Coding/.../target/classes/css/utility.css: Expected RBRACE at [3,4]
Feb. 21, 2023 5:32:48 PM javafx.css.CssParser term
WARNING: CSS Error parsing file:/G:/.../Coding/.../target/classes/css/login-menu.css: Unexpected token '-' at [4,30]
Feb. 21, 2023 5:32:48 PM javafx.css.CssParser term
WARNING: CSS Error parsing file:/G:/.../Coding/.../target/classes/css/login-menu.css: Unexpected token '-' at [4,30]
Feb. 21, 2023 5:32:48 PM javafx.css.CssParser reportException
WARNING: Please report java.lang.NullPointerException at:
    javafx.graphics@19/javafx.css.CssParser.term(CssParser.java:4689)
    javafx.graphics@19/javafx.css.CssParser.expr(CssParser.java:4583)
    javafx.graphics@19/javafx.css.CssParser.declaration(CssParser.java:4554)
    javafx.graphics@19/javafx.css.CssParser.declarations(CssParser.java:4472)
    javafx.graphics@19/javafx.css.CssParser.parse(CssParser.java:3981)
    javafx.graphics@19/javafx.css.CssParser.parse(CssParser.java:253)
    javafx.graphics@19/javafx.css.CssParser.parse(CssParser.java:241)

我已经问过 chatGPT，但似乎有些事情，AI 无法帮助我们（还）：D

这是“utility.css”文件的代码，我在其中声明了变量

:root {
    --maincolor: #2b284d;
    --backgrounddark: #2b284d;
    --backgroundlight: #5a4f7d;
    --panel: #3c325c;
    --panelhighlighted: #503d6b;
    --panelselected: #503d6f;
    --casualbutton: #2b284d;
    --casualbuttonhighlighted: #5d5478;
    --crucialbuttonhightled: #eb5b0e;
    --textfield: #2b288d;
    --textfill: #b5b5b5;
}

两个样式表中的这个：

@import "utility.css";

.combo-box .list-cell:filled:selected {
    -fx-background-color: var(--panelhighlighted);
    -fx-text-fill: #b5b5b5 ;
    -fx-font-family: "Calibri Light" ;
    -fx-font-size: 17;
    -fx-background-radius: 20px;
}

.combo-box .combo-box-popup .list-view, .combo-box .combo-box-popup .list-cell {
    -fx-background-color: var(--panel);
    -fx-text-fill: var(--textfill) ;
    -fx-font-family: "Calibri Light" ;
    -fx-font-size: 17;
    -fx-background-radius: 20px;
}

.combo-box .combo-box-popup .list-cell:hover {
    -fx-text-fill:  var(--textfill);
    -fx-background-color: var(--panelhighlighted);
}

.password-field {
    -fx-text-fill: #b5b5b5 ;
    -fx-prompt-text-fill: #b5b5b5 ;
}

.anchor-pane {
    overflow:hidden;
    -fx-background-color: #2b284d;
}

和

@import "utility.css";

.list-cell:filled:selected:focused, .list-cell:filled:selected {
    -fx-background-color: var(--panelselected);
}

.list-cell:filled:hover {
    -fx-background-color: var(--panelhighlighted);
}

.list-cell {
    -fx-background-color: var(--panel);
    -fx-pref-height: 60;
    -fx-background-radius: 20px;
    -fx-background-insets: 0;
    -fx-text-fill: var(--textfill) ;
    -fx-font-family: "Calibri Light" ;
    -fx-font-size: 20;
    -fx-alignment: center-left;
}

.list-view {
    -fx-background-color: var(--backgrounddark);
    -fx-border-color: var(--backgrounddark);
    -fx-background-insets: 0;
    -fx-padding: 0px;
}

.password-field {
    -fx-text-fill: var(--textfill) ;
    -fx-prompt-text-fill: var(--textfill) ;
    -fx-background-radius: 20px;
    -fx-background-color: var(--textfield);
}

.label {
    -fx-text-fill: var(--textfill);
    -fx-background-color: var(--textfield);
}

所以我试图消除变量名中的“-”，因为它们在 css 中用作命令或某物的开始，但这没有成功。 我还尝试了一个在线 css 调试工具，它只说我应该用一个叫做 link 的东西切换 import 语句以提高性能，这对我来说并不重要 atm.

我完全不知道，这里有什么问题。我使用的是 IntelliJ 2022.3.1（终极版）。 错误发生在运行时，在此之前，IntelliJ 根本不会抱怨，甚至会自动完成样式表中的变量名，因此它们肯定存在并且绝对正确。

错误似乎发生了，当 css 解析器到达调用变量的第一个样式表中的第一个“-”时，就好像这可能不会在那里发生一样。