原理

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

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

使用

POM文件设置

代码如下：

    
        
            us.hebi.sass
            sass-cli-maven-plugin
            1.0.3
            
                1.62.0
                
                    ${project.basedir}/src/scss/input.scss:${project.basedir}/target/classes/css/output.css
                    --no-source-map
                    
                    --no-charset
                
            
            
                
                    sass-exec
                    generate-resources
                    
                        run
                    
                
            
        
    

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

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

它的基本格式是：

项目SCSS文件路径:编译后CSS文件路径

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

引入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中也可以如下设置：