M1芯片MacBook运行Ionic+Angular应用出现CSS样式表解析报错

报错信息 #

Did not parse stylesheet at 'ionic://localhost/styles.css' because non CSS MIME types are not allowed in strict mode.

问题原因 #

这是M1芯片Mac运行iOS模拟器时的专属兼容性问题，本质是Ionic使用的原生WebView组件对本地静态资源的MIME类型识别错误，将CSS文件识别为非CSS类型，触发了严格模式下的加载拦截。

修复方案 #

• 升级依赖到适配M1的版本
  如果你用Capacitor作为原生打包工具，执行以下命令升级依赖并同步项目：
  npm update @capacitor/cli @capacitor/core @capacitor/ios
npx cap sync ios
  如果你用Cordova作为原生打包工具，升级cordova-ios到6.2及以上版本：
  ionic cordova platform remove ios
ionic cordova platform add ios@latest
• 使用Rosetta模式运行Xcode
  右键访达中的Xcode应用，点击「显示简介」，勾选「使用Rosetta打开」，重启Xcode后再运行项目即可正常加载资源。
• 重建原生项目缓存
  直接删除项目根目录下的ios文件夹，重新执行添加iOS平台、同步资源的操作，避免旧缓存导致的资源识别异常。

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