在Ionic Angular中如何自定义颜色名称并实现全局复用

方案1：仅需在SCSS中使用（最简单） #

你之前导出的TS颜色对象是给JS/TS逻辑调用的，SCSS作为预处理器无法直接读取TS文件的内容，要在SCSS里复用颜色，用SCSS全局变量即可：

1. 新建全局变量文件，比如src/styles/variables.scss，定义颜色变量：

$primary: #26316d;
$secondary: #8995d6;

2. 配置全局导入，避免每个组件手动引入。打开项目根目录的angular.json，找到对应项目的配置项：

{
  "projects": {
    "你的项目名": {
      "architect": {
        "build": {
          "options": {
            "stylePreprocessorOptions": {
              "includePaths": ["src/styles"]
            }
          }
        }
      }
    }
  }
}

3. 重启项目后，任意组件的SCSS文件都可以直接调用变量，你的header.page.scss可以改成：

.header {
    display: flex;
    background: $primary;
}

方案2：需要同时在TS逻辑和SCSS中共用颜色 #

如果你的TS文件里也要用到这些颜色值（比如动态绑定样式），可以用CSS原生变量实现两端复用：

1. 在全局样式文件（比如src/styles/global.scss）中定义CSS变量：

:root {
  --primary: #26316d;
  --secondary: #8995d6;
}

2. SCSS中直接调用即可：

.header {
    display: flex;
    background: var(--primary);
}

3. 你的color.ts可以直接读取全局CSS变量，不用重复写色值，保持两端同步：

export default {
  primary: getComputedStyle(document.documentElement).getPropertyValue('--primary').trim(),
  secondary: getComputedStyle(document.documentElement).getPropertyValue('--secondary').trim(),
};

附加：适配Ionic原生组件 #

如果你希望Ionic自带组件（比如ion-button、ion-header）也能直接用你的自定义颜色，可以把颜色同步到Ionic的主题变量中，在variables.scss中添加：

--ion-color-primary: #26316d;
--ion-color-primary-rgb: 38, 49, 109;
--ion-color-primary-contrast: #ffffff;
--ion-color-primary-contrast-rgb: 255, 255, 255;
--ion-color-primary-shade: #212b60;
--ion-color-primary-tint: #3c467c;

--ion-color-secondary: #8995d6;
// 同理补充secondary对应的其他Ionic主题变量

配置完成后就可以直接在组件中用<ion-button color="primary">按钮</ion-button>调用你的自定义颜色。

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