不使用自定义主题时如何在Vaadin 14.7.x中启用Badge CSS类

正确参数取值与对应路径 #

@CssImport的value为必填参数，用于指定要导入的CSS文件实际路径，仅配置include参数无法关联到具体样式资源，因此原有配置失效。

• 直接使用官方Lumo Badge原生样式时：
  value参数正确取值为 @vaadin/vaadin-lumo-styles/badge.css，对应的官方CSS文件默认存放在项目npm依赖目录下的node_modules/@vaadin/vaadin-lumo-styles/badge.css路径，完整可生效的配置示例如下：

  @JsModule("@vaadin/vaadin-lumo-styles/badge.js")
  @CssImport(value = "@vaadin/vaadin-lumo-styles/badge.css", include = "lumo-badge")
  

• 自定义Badge样式时：
  你可以将自定义的CSS文件存放在Vaadin项目的src/main/resources/META-INF/resources/frontend/目录下，比如自定义样式文件路径为src/main/resources/META-INF/resources/frontend/styles/custom-badge.css，那么value参数对应填写./styles/custom-badge.css即可。

内容的提问来源于stack exchange，提问作者rmuller