Vaadin 14.4.x升级至14.6/14.7出现样式异常，求最佳升级实践

升级最佳实践 #

• 升级前先备份构建配置文件（pom.xml/build.gradle）和自定义样式文件，避免升级过程中自定义内容被覆盖
• 14.5+版本调整了Lumo主题的字体加载逻辑、深色模式样式变量定义，存在少量不向下兼容的配置变更，升级前提前确认适配点
• 不要仅更新依赖就直接启动项目，先全量清理所有缓存后再执行构建

字体异常、深色模式失效问题修复方案 #

第一步：全量清理多维度缓存（你仅删除frontend文件夹未覆盖这些缓存） #

• 删除项目根目录下的node_modules文件夹、package.json、package-lock.json、pnpm-lock.yaml、webpack.config.js、webpack.generated.js等前端构建生成的文件
• Maven项目执行mvn clean install -DskipTests清理编译缓存，Gradle项目执行gradle clean build -x test
• 删除用户根目录下的.vaadin全局缓存文件夹，该文件夹会缓存旧版本的前端资源，仅清理项目内文件不会触及该缓存

第二步：修复深色模式切换失效问题 #

14.6+版本默认启用了系统主题自动感知特性，和旧版本手动切换深色模式的逻辑冲突，需要手动关闭该特性：

• 可在UI类的静态代码块中添加配置：

static {
    LumoBaseTheme.setDarkModeAutoDetectionEnabled(false);
}

• 也可以在src/main/resources/application.properties中添加全局配置：
  vaadin.lumo.dark-mode-auto-detection=false

第三步：修复字体显示不一致问题 #

14.5+版本默认将字体从Roboto调整为系统优先的字体栈，如需沿用14.4.x的Roboto字体，手动配置主题变量即可：

• 在你的自定义样式文件中添加以下CSS配置：

html {
    --lumo-font-family: "Roboto", "Noto Sans", sans-serif;
}

升级后验证步骤 #

• 启动项目后使用浏览器无痕模式访问，避免浏览器缓存的旧样式影响验证结果
• 切换深色模式确认功能正常，核对页面字体显示是否和旧版本一致
• 若仍有样式异常，打开浏览器控制台网络面板，确认所有CSS、字体资源加载正常，无404错误

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