Vaadin：@CssImport 在视图中如何工作？它是“全球”进口吗？

Question

例如，如果我有一个使用的视图

@CssImport(value = "somefile.css")

与somefile.css定义类似

.test-foobar {

  color: green

}

我可以.addClassName("test-foobar")在任何视图/类中的任何组件中使用，即使该类没有用@CssImport(value = "somefile.css").

就像一旦定义了它就@CssImport对所有视图都是全局可用的。

除了在每个组件的类文件中硬编码 css 定义之外，您还可以在刚刚导入并用于用 注释的视图的文件中定义 css 规则吗@CssImport？

PS 我现在使用的是 vaadin 14，但是如果 23+ 中的情况有所不同，可以提供信息，只是为了知道它是如何工作的。

Answer 1

是的，这是全局导入，这是文档中所述的预期行为

注意：目前所有前端资源都捆绑在一起成为一个大包。这意味着，一个类加载的 CSS 文件将出现在另一个类构造的视图上。例如，如果有两个用@Route("")注释的RootRoute类，以及用@Route("route-a")和@CssImport("./styles/custom-style.css")注释的另一个类RouteA， custom-style.css 也将出现在根路由上。

因此，从这里开始，这基本上是一个问题，您需要多大程度地改变视图之间的样式。

如果是很小的事情，在很少的组件上，我会坚持使用全局 CSS 并在需要的地方添加一些类名称。

如果你有巨大的变化，我会选择“子主题”。创建您自己的主题，然后使用 [theme~="special-theme-for-a"]选择器分离样式并在视图/路由器布局中设置主题。理想情况下，您只需在非常高的级别上切换一些变量即可做到这一点。您可以从 Lumo 主题中的明暗处理方式或许多现有组件的“主题变体”处理方式中获得一些提示。

还相关：

• https://vaadin.com/docs/latest/application/styling
• https://vaadin.com/docs/v14/flow/styling/theme-variants
• https://vaadin.com/docs/v14/flow/styling/sharing-style-sheets