遑盲 发表于 前天 12:05

Maven JavaFX使用SCSS样式表

关于SCSS

详见此处。
原理

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

POM文件设置

代码如下:
<build>
    <plugins>
      <plugin>
            <groupId>us.hebi.sass</groupId>
            sass-cli-maven-plugin</artifactId>
            <version>1.0.3</version>
            <configuration>
                <sassVersion>1.62.0</sassVersion>
               
                  ${project.basedir}/src/scss/input.scss:${project.basedir}/target/classes/css/output.css</arg>
                  --no-source-map</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>代码中只需要关注一个地方:
${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中也可以如下设置:


来源:程序园用户自行投稿发布,如果侵权,请联系站长删除
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!
页: [1]
查看完整版本: Maven JavaFX使用SCSS样式表