如何在Vaadin应用中动态设置CSS文件？

以下是几种适配你场景的CSS切换方案，可根据项目实际情况选择：

方案1：动态替换已加载的主CSS #

如果必须保留@CssImport注解，可在应用启动时判断主机名，移除自动注入的主CSS并加载目标文件：

1. 获取当前主机名：

   String hostname = UI.getCurrent().getSession().getBrowser().getLocation().getHost();
   

2. 匹配并移除主CSS对应的<link>标签：

   Page page = UI.getCurrent().getPage();
   // 匹配@CssImport生成的主CSS链接
   Optional<Element> mainStyleLink = page.getDocument()
       .querySelectorAll("link[rel='stylesheet']")
       .stream()
       .filter(link -> link.getAttribute("href").contains("main-view.css"))
       .findFirst();
   // 移除主CSS
   mainStyleLink.ifPresent(Element::remove);
   

3. 加载目标CSS文件：

   if ("XY".equals(hostname)) {
       page.addStyleSheet("frontend/styles/views/xy/xy-view.css");
   }
   

   注意：需根据项目实际路径调整CSS文件的引用地址，Vaadin中frontend/目录下的文件可直接通过该路径访问。

方案2：放弃@CssImport，改用代码动态加载 #

这种方式更简洁，完全通过代码控制CSS加载逻辑，无需处理移除原有样式的问题：
在UI初始化方法（如init或attach）中添加判断逻辑：

@Override
protected void init(VaadinRequest request) {
    String hostname = request.getLocalName();
    Page page = getPage();
    
    if ("XY".equals(hostname)) {
        page.addStyleSheet("frontend/styles/views/xy/xy-view.css");
    } else {
        page.addStyleSheet("frontend/styles/views/main/main-view.css");
    }
    
    // 其他UI初始化逻辑...
}

方案3：基于Vaadin主题变体切换 #

如果你的样式是主题体系的一部分，可通过切换主题属性实现样式切换：

1. 在主题文件中定义不同变体的样式引用：

   /* main-theme 下加载主CSS */
   :host([theme~="main-theme"]) {
       @import "./styles/views/main/main-view.css";
   }
   /* xy-theme 下加载目标CSS */
   :host([theme~="xy-theme"]) {
       @import "./styles/views/xy/xy-view.css";
   }
   

2. 在代码中根据主机名切换主题属性：

   String hostname = UI.getCurrent().getSession().getBrowser().getLocation().getHost();
   UI.getCurrent().getElement().setAttribute("theme", "XY".equals(hostname) ? "xy-theme" : "main-theme");
   

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