如何将Liferay主题从7.0升级适配至7.4版本？

7.4版本对主题的版本校验规则、基础依赖、前端模板规则做了不兼容更新，直接部署7.2版本升级生成的war包会触发版本不兼容报错，按以下步骤操作即可完成适配：

1. 升级本地主题构建工具链 #

7.4版本主题要求匹配10.x版本的官方主题构建工具，先全局升级对应依赖：

• 执行全局安装命令更新工具：
  npm install -g generator-liferay-theme@10.x gulp-cli yo
• 进入你的7.2版本主题根目录，删除旧的node_modules文件夹、package-lock.json文件，重新执行npm install安装适配7.4的依赖包。

2. 执行自动升级任务 #

在主题根目录执行升级指令，工具会自动完成大部分版本适配工作：
gulp upgrade
自动升级过程会完成以下修改：

• 替换liferay-look-and-feel.xml中的DTD引用、版本声明为7.4对应版本
• 更新基础主题依赖（styled、unstyled主题包）到7.4匹配版本
• 替换已废弃的FTL模板标签、CSS变量为7.4兼容写法
• 移除7.3及之后版本废弃的主题配置项
  执行过程中如果提示文件冲突，选择保留自定义修改即可，升级任务不会覆盖你自行编写的业务样式、模板逻辑。

3. 手动补全自动升级未覆盖的配置 #

• 打开主题根目录下的liferay-plugin-package.properties文件，确认liferay-versions配置项值为7.4.0+，没有该配置项则手动添加。
• 如果主题自定义了页面模板、登录页模板，需要对照7.4基础主题的模板结构补全无障碍属性、调整DOM容器层级：7.4调整了页面渲染的DOM结构，直接沿用旧模板会导致页面编辑、交互功能异常。
• 如果主题中使用了Lexicon 2的样式类名，需要替换为7.4默认搭载的Lexicon 3对应类名，旧类名在7.4版本中已被移除。

避坑提示：不要直接修改7.2版本war包内的版本号强行部署，跳过升级步骤会导致主题加载后页面样式错乱、后台编辑功能不可用等隐性问题。

4. 重新打包部署验证 #

在主题根目录执行打包命令生成适配7.4的war包：
gulp build
将dist目录下生成的war包放入7.4服务器的deploy目录，控制台无版本不兼容提示即部署成功。部署后建议逐一验证页面样式、交互功能是否正常，对小的样式偏差做微调即可。

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