升级Capacitor后Angular项目自定义主题不生效问题排查

已将Angular项目从Cordova升级到Capacitor，但src/theme/variables.scss中定义的主题未被应用，系统反而使用node_modules/@ionic/angular/css/core.css中的默认主题。

例如使用color="primary"的组件：

<ion-header mode="md"
            class="ion-no-border">
    <ion-toolbar color="primary">
        <ion-buttons slot="start">
            <ion-menu-button></ion-menu-button>

并未使用variables.scss里的--ion-color-primary变量，而是采用core.css的默认值。

src/theme/variables.scss内容：

:root {
  --ion-color-primary: #007eae;
  --ion-color-primary-rgb: 0,126,174;
  --ion-color-primary-contrast: #ffffff;
  --ion-color-primary-contrast-rgb: 255,255,255;
  --ion-color-primary-shade: #006f99;
  --ion-color-primary-tint: #1a8bb6;
  --ion-color-secondary: #0cd1e8;
  --ion-color-secondary-rgb: 12,209,232;
  --ion-color-secondary-contrast: #ffffff;
  --ion-color-secondary-contrast-rgb: 255,255,255;
  --ion-color-secondary-shade: #0bb8cc;
  --ion-color-secondary-tint: #24d6ea;
}

问题出在angular.json中样式文件的加载顺序：当前你把自定义主题文件放在了Ionic核心CSS之前，而Ionic的core.css中也定义了默认的--ion-color-primary等变量，后加载的CSS会覆盖之前的变量值，导致自定义主题被默认主题覆盖。

1. 调整样式文件加载顺序 #

修改angular.json里的styles数组顺序，将Ionic的CSS文件放在最前面，自定义的主题和全局样式放在最后：

"styles": [
  "node_modules/@ionic/angular/css/core.css",
  "node_modules/@ionic/angular/css/normalize.css",
  "node_modules/@ionic/angular/css/structure.css",
  "node_modules/@ionic/angular/css/typography.css",
  "node_modules/@ionic/angular/css/display.css",
  "node_modules/@ionic/angular/css/padding.css",
  "node_modules/@ionic/angular/css/float-elements.css",
  "node_modules/@ionic/angular/css/text-alignment.css",
  "node_modules/@ionic/angular/css/text-transformation.css",
  "node_modules/@ionic/angular/css/flex-utils.css",
  "src/theme/variables.scss",
  "src/global.scss"
]

调整后，自定义的CSS变量会覆盖Ionic的默认值，主题即可正常生效。

2. 修复变量文件语法错误 #

你的variables.scss代码末尾缺少闭合的}，补上后确保文件语法正确：

:root {
  --ion-color-primary: #007eae;
  --ion-color-primary-rgb: 0,126,174;
  --ion-color-primary-contrast: #ffffff;
  --ion-color-primary-contrast-rgb: 255,255,255;
  --ion-color-primary-shade: #006f99;
  --ion-color-primary-tint: #1a8bb6;
  --ion-color-secondary: #0cd1e8;
  --ion-color-secondary-rgb: 12,209,232;
  --ion-color-secondary-contrast: #ffffff;
  --ion-color-secondary-contrast-rgb: 255,255,255;
  --ion-color-secondary-shade: #0bb8cc;
  --ion-color-secondary-tint: #24d6ea;
}

3. 清理缓存并重新构建 #

执行以下命令清理项目缓存，避免旧CSS缓存影响结果：

ng clean
ng build

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