Vaadin 的 CssImport 注释是否损坏？答案

【问题标题】：Is Vaadin's CssImport annotation broken?Vaadin 的 CssImport 注释是否损坏？
【发布时间】：2022-01-11 20:44:50
【问题描述】：

我们使用 Vaadin 14.5 和 @CssImport 自定义 CSS 工作正常。现在我们想要更新，但从 14.6 开始，@CssImport 不再加载自定义 CSS。

我们有以下 Maven 结构：

- app-1, -2... : the apps that have common code and style

- shared : all the code and style we share between our apps
 |
 +- src/main/java/our/package/AbstractUI.java
 |
  - src/main/resources/META-INF/resources/frontend/
   |
   +- css
      |  
      +-styles.css
      |
       - vaadin-vertical-layout.css

在共享工件中，我们有几个用于 Vaadin 组件的自定义 CSS 文件，其中我们解决了必须在影子 DOM 中调整的 CSS：

vaadin-vertical-layout.css
/* Page */
:host(.Page) {
    left: 64px;
    padding-top: 2em;
    position: absolute;
    transition: all 0.5s ease;
    width: calc(100% - 64px);
}

然后我们将所有这些自定义 CSS 加载到类 AbstractUI 中，这是所有其他 UI 类的超类：

@StyleSheet("./css/styles.css")
...
@CssImport(value = "./css/vaadin-vertical-layout.css", themeFor = "vaadin-vertical-layout")
@Theme(value = Material.class, variant = Material.LIGHT)
public abstract class AbstractUI extends VerticalLayout {

应用程序不必费心处理所有注释，只需扩展 AbstractUI 即可加载 CSS 并将其添加到现有的影子 DOM CSS 中。

这在 Vaadin 14 到 14.5.5 中运行良好，但在 14.6.0 之后不再加载自定义 CSS。 vaadin-maven-plugin 在构建前端时会检查 CSS 文件是否存在（如果它们不存在则退出并显示错误），但在应用程序中 CSS只是没有加载。澄清一下：@StyleSheet 注释仍然有效，因此 CSS 已加载。

这是 Vaadin 中的错误还是我们错过了一些关键信息？

【问题讨论】：

您能否提供一些代码示例，将github.com/vaadin/skeleton-starter-flow/tree/v14 与 14.7.4（也是 14.6.0）一起使用，CssImport 在这种情况下可以正常工作。具有默认亮度和定义的材质主题。所以我真的不知道在这种情况下要尝试什么额外的东西。
我创建了一个最小的工作示例（我的问题中的结构）在这里发布 - 它有效。我现在正式感到困惑，因为我不知道有什么区别。当我找到它时，我会报告。
@MikaelGrankvist 问题是由插件“tinymce-for-flow”引起的，在最新版本之前，该插件有一个包含“主题”的资源路径。
我在 Github 上为此创建了一个问题：github.com/vaadin/platform/issues/2596

标签： java spring-boot maven vaadin14

【解决方案1】：

缺少的关键信息是一个名为“TinyMCE for Flow”的 Vaadin Web 组件，这是导致此行为的原因。不知道为什么摔得这么厉害。解决方案是将其更新到最新版本 (3.1.1)。

【讨论】：