Ionic V4.12.0执行ionic serve后白屏问题（Cordova8.1.2）

我之前帮开发者处理过类似的Ionic 4版本兼容问题，结合你的情况，咱们一步步来搞定这个白屏+子视图异常的问题：

问题根源 #

你提到的这段core.css代码，原本是Ionic用来默认隐藏路由组件、各类控制器元素的规则，但在Ionic 4.12.0这个版本里，错误地加入了[hidden]这个全局属性选择器。这就导致初始化时带有hidden属性的页面组件被强制隐藏，出现白屏；而直接删掉整段代码又会破坏Ionic的视图隐藏逻辑，让子视图无法正常切换显示。

具体解决方案 #

方案1：精准修改CSS规则（快速临时修复）

不要直接删除整段代码，而是移除那个惹麻烦的[hidden]选择器，保留Ionic官方指定的.ion-page-hidden类以及其他必要的隐藏规则。修改后的代码如下：

on-route, ion-route-redirect, ion-router, ion-select-option, ion-nav-controller, ion-menu-controller, ion-action-sheet-controller, ion-alert-controller, ion-loading-controller, ion-modal-controller, ion-picker-controller, ion-popover-controller, ion-toast-controller, .ion-page-hidden { /* stylelint-disable-next-line declaration-no-important */ display: none !important; }

这样既不会让页面被误隐藏导致白屏，又能保留Ionic原生的子视图隐藏逻辑，确保子视图正常显示。

方案2：升级Ionic核心版本（长期稳定方案）

这个问题是Ionic 4.x早期版本的已知bug，后续的4.x补丁版本已经修复了这个CSS规则的问题。建议你执行以下命令升级到Ionic 4.x的稳定版本：

npm install @ionic/angular@4.x --save

升级完成后，重新运行ionic serve，不需要手动修改core.css，白屏和子视图的问题都会自然解决。

额外小技巧 #

如果升级后还是有问题，可以尝试清除缓存再重新构建运行：

ionic cache clear
npm run build
ionic serve

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