Maven JavaFX使用SCSS样式表

关于SCSS

详见此处。
原理

JavaFX本身的CSS解析器不支持SCSS，因此我们需要在编译阶段将SCSS文件编译为CSS文件，然后在JavaFX中引入CSS文件。
本文使用的编译插件是sass-cli-maven-plugin。
使用

POM文件设置

代码如下：

1. <build>
2.     <plugins>
3.         <plugin>
4.             <groupId>us.hebi.sass</groupId>
5.             sass-cli-maven-plugin</artifactId>
6.             <version>1.0.3</version>
7.             <configuration>
8.                 <sassVersion>1.62.0</sassVersion>
9.                
10.                     ${project.basedir}/src/scss/input.scss:${project.basedir}/target/classes/css/output.css</arg>
11.                     --no-source-map</arg>
12.                     
13.                     --no-charset</arg>
14.                 </args>
15.             </configuration>
16.             <executions>
17.                 <execution>
18.                     <id>sass-exec</id>
19.                     <phase>generate-resources</phase>
20.                     <goals>
21.                         <goal>run</goal>
22.                     </goals>
23.                 </execution>
24.             </executions>
25.         </plugin>
26.     </plugins>
27. </build>

复制代码

代码中只需要关注一个地方：
${project.basedir}/src/scss/input.scss{project.basedir}/target/classes/css/output.css
它的基本格式是：
项目SCSS文件路径:编译后CSS文件路径
路径写好以后即可编译查看是否有效。
引入CSS文件

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

1. public class MainApplication extends Application {
3.     @Override
4.     public void start(Stage stage) throws IOException {
5.         FXMLLoader fxmlLoader = new FXMLLoader(MainApplication.class.getResource("/fxml/main-application.fxml"));
6.         Parent root = fxmlLoader.load();
7.         // 嵌入全局css表
8.         root.getStylesheets().add(Objects.requireNonNull(MainApplication.class.getResource("/css/output.css"))
9.                 .toExternalForm());
10.         Scene scene = new Scene(root);
11.         stage.setScene(scene);
12.         stage.show();
13.     }
15.     public static void main(String[] args) {
16.         launch();
17.     }
19. }

复制代码

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

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！