Maven JavaFX使用SCSS样式表

关于SCSS

详见此处。

原理

JavaFX本身的CSS解析器不支持SCSS，因此我们需要在编译阶段将SCSS文件编译为CSS文件，然后在JavaFX中引入CSS文件。

本文使用的编译插件是sass-cli-maven-plugin。

使用

POM文件设置

代码如下：

<build>
 <plugins>
 <plugin>
 <groupId>us.hebi.sass</groupId>
 <artifactId>sass-cli-maven-plugin</artifactId>
 <version>1.0.3</version>
 <configuration>
 <sassVersion>1.62.0</sassVersion>
 <args>
 <arg>${project.basedir}/src/scss/input.scss:${project.basedir}/target/classes/css/output.css</arg>
 <arg>--no-source-map</arg>
 <!-- 解析后的css文件会在首行增加@charset标识，JavaFX的CSS解析器不支持该语法，因此需要使用以下命令禁用 -->
 <arg>--no-charset</arg>
 </args>
 </configuration>
 <executions>
 <execution>
 <id>sass-exec</id>
 <phase>generate-resources</phase>
 <goals>
 <goal>run</goal>
 </goals>
 </execution>
 </executions>
 </plugin>
 </plugins>
</build>

代码中只需要关注一个地方：

<arg>${project.basedir}/src/scss/input.scss:${project.basedir}/target/classes/css/output.css</arg>

它的基本格式是：

<arg>项目SCSS文件路径:编译后CSS文件路径</arg>

路径写好以后即可编译查看是否有效。

引入CSS文件

编译完成后，我们只需要在项目中引入CSS文件即可，以/target/classes/css/output.css地址为例：

public class MainApplication extends Application {
 @Override
 public void start(Stage stage) throws IOException {
 FXMLLoader fxmlLoader = new FXMLLoader(MainApplication.class.getResource("/fxml/main-application.fxml"));
 Parent root = fxmlLoader.load();
 // 嵌入全局css表
 root.getStylesheets().add(Objects.requireNonNull(MainApplication.class.getResource("/css/output.css"))
 .toExternalForm());
 Scene scene = new Scene(root);
 stage.setScene(scene);
 stage.show();
 }
 public static void main(String[] args) {
 launch();
 }
}

另外，程序开发阶段运行时可能不会触发该插件的编译，如果SCSS文件更新，可能需要先手动编译一次再运行。

如果是IDEA中也可以如下设置：