如何将.css嵌入jar包并通过@CssImport为Vaadin组件绑定样式

可行性说明 #

完全可以使用@CssImport为独立打包的Vaadin组件绑定样式，Vaadin的资源扫描机制本身支持读取第三方依赖Jar包内的前端资源，无需业务应用做额外适配。

具体操作步骤 #

• Step1：配置组件Jar的资源目录
  在组件项目的src/main/resources路径下创建层级目录META-INF/frontend，所有组件关联的CSS文件都放在该目录或其子目录下，例如你为自定义的CustomCard组件编写的样式可以存储为：META-INF/frontend/components/custom-card.css。
• Step2：给组件类添加@CssImport注解
  注解的value参数填写CSS文件相对于META-INF/frontend的路径，无需带前缀，示例代码如下：

  // 注解路径对应META-INF/frontend/components/custom-card.css
  @CssImport("./components/custom-card.css")
  public class CustomCard extends VerticalLayout {
      // 组件实现逻辑
  }
  

  如果你的样式是针对Vaadin原生组件的主题扩展，还可以添加themeFor参数指定作用的组件标签，例如：

  @CssImport(value = "./styles/custom-button-theme.css", themeFor = "vaadin-button")
  public class CustomThemeButton extends Button {
  }
  

• Step3：打包引入即可自动加载
  将组件项目正常打包为Jar后，业务应用直接引入该Jar依赖即可。Vaadin启动时会自动扫描所有依赖Jar内的META-INF/frontend资源，结合组件上的@CssImport注解自动完成样式加载。

异常排查要点 #

如果出现样式不生效的情况，可以优先核对以下配置：

• 解压组件Jar，确认CSS文件确实存在于META-INF/frontend对应的路径下，没有出现目录拼写错误
• 确认@CssImport的路径以./开头，和文件在frontend目录下的相对路径完全匹配
• 确认组件开发使用的Vaadin版本和业务项目的Vaadin版本一致，避免版本差异导致的资源扫描失效

内容的提问来源于stack exchange，提问作者The Shoe Shiner