从Angular 8升级到17及Carbon 3到5后样式未正常生效

升级前后配置对比 #

升级前（Angular 8 + Carbon v10） #

依赖项：

"dependencies": {
    "@angular/core": "^8.2.8",
    "@carbon/icons-angular": "^10.8.0",
    "@carbon/type": "^10.11.0",
    "carbon-components": "^10.13.0",
    "carbon-components-angular": "^3.52.3"
}

样式文件style.css：

@import 'carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/themes/theme-maps';
$carbon--theme: $carbon--theme--g10;
@import 'carbon-components/scss/globals/scss/vendor/@carbon/type/scss/font-family';
@import 'carbon-components/scss/globals/scss/typography';
@import "carbon-components/scss/globals/scss/styles";
@import "~font-awesome/css/font-awesome.css";
@import '@carbon/type/scss/type';
@include carbon--type-reset();
@include carbon--font-face-mono();
@include carbon--font-face-sans();

升级后（Angular 17 + Carbon v11混合v10） #

依赖项：

"dependencies": {
    "@angular/core": "^17.0.8",
    "@carbon/icons": "^11.33.0",
    "@carbon/styles": "^1.47.0",
    "@carbon/type": "^11.25.1",
    "@ibm/plex": "^6.3.0",
    "carbon-components": "^10.58.12",
    "carbon-components-angular": "^4.75.7"
}

样式文件style.css：

@use '@carbon/styles/scss/config' with (
    $use-flexbox-grid: true,
    $flex-grid-columns: 12,
    $use-akamai-cdn: true,
    $font-display: swap
);
@use '@carbon/styles/scss/compat/themes' as compat;
@use '@carbon/styles/scss/themes';
@use '@carbon/styles/scss/theme' with (
    $fallback: compat.$g100,
    $theme: themes.$g10
);
@use '@carbon/styles';

@use '@carbon/type';
@use '@carbon/colors';
@import "carbon-components/scss/globals/scss/styles";

问题根源 #

1. 新旧样式系统冲突：同时引入Carbon v11的@carbon/styles和v10的carbon-components样式，导致变量、混合器优先级混乱
2. 主题配置不兼容：v11的主题配置逻辑和v10完全不同，混用后无法正确加载主题样式
3. 字体加载冗余：v11的@carbon/styles已内置IBM Plex字体加载逻辑，手动引入@carbon/type的mixin会重复定义甚至覆盖
4. 样式加载顺序错误：先加载v11样式再加载v10的styles，导致旧样式覆盖新样式，或者主题变量未正确传递

修复方案 #

调整样式配置（统一为Carbon v11兼容模式） #

修改style.css为以下内容，确保样式系统统一、主题正确传递：

// 1. 配置Carbon全局参数
@use '@carbon/styles/scss/config' with (
    $use-flexbox-grid: true,
    $flex-grid-columns: 12,
    $use-akamai-cdn: true,
    $font-display: swap
);

// 2. 配置主题（使用v11原生主题，兼容v10组件）
@use '@carbon/styles/scss/themes';
@use '@carbon/styles/scss/theme' with (
    $fallback: themes.$g100,
    $theme: themes.$g10
);

// 3. 加载Carbon核心样式
@use '@carbon/styles';

// 4. 加载v10组件兼容性样式（如果还在使用carbon-components v10的组件）
@import "carbon-components/scss/globals/scss/styles";

// 5. 引入Font Awesome（保持原有需求）
@import "font-awesome/css/font-awesome.css";

依赖优化建议 #

• 移除@carbon/type：@carbon/styles已包含类型系统功能，无需单独引入
• 确认carbon-components-angular v4的兼容性：该版本已适配Carbon v11，可逐步替换carbon-components v10为v11的组件（如果有）
• 确保@ibm/plex版本和@carbon/styles匹配：当前版本^6.3.0是兼容的，无需调整

额外排查点 #

1. 检查Angular的angular.json中样式文件的加载顺序，确保style.css是第一个加载的全局样式
2. 清除浏览器缓存和Angular构建缓存（执行ng clean && ng build）
3. 检查组件内是否有硬编码的样式覆盖了Carbon的全局样式

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