SAP Spartacus 6 ASM样式未加载问题修复咨询

问题原因 #

从V4.3升级到V6.4后，Spartacus调整了功能模块的样式加载机制，ASM组件的主题样式不再自动随懒加载模块引入，导致仅显示默认HTML样式。

修复步骤 #

1. 手动导入ASM主题样式 #

在项目的全局样式文件（如styles.scss）中添加ASM样式的导入：

// 先导入Spartacus全局主题基础样式
@import '@spartacus/styles';
// 导入ASM组件专属样式
@import '@spartacus/asm/styles';

2. 调整ASM模块导入方式（二选一） #

方式一：取消懒加载，静态导入ASM模块

如果项目不需要ASM模块懒加载，直接在AsmFeatureModule中静态导入AsmModule，确保样式随模块同步加载：

import { NgModule } from '@angular/core';
import { asmTranslationChunksConfig, asmTranslations } from '@spartacus/asm/assets';
import { AsmModule, AsmRootModule } from '@spartacus/asm';
import { I18nConfig, provideConfig } from '@spartacus/core';

@NgModule({
  declarations: [],
  imports: [
    AsmRootModule,
    AsmModule // 静态导入ASM模块
  ],
  providers: [
    provideConfig(<I18nConfig>{
      i18n: {
        resources: asmTranslations,
        chunks: asmTranslationChunksConfig,
      },
    })
  ]
})
export class AsmFeatureModule { }

方式二：保留懒加载，确保样式被引入

若需保留懒加载配置，需在懒加载模块的入口文件中导入ASM样式，或者直接采用全局样式导入的方式（推荐第一种修复方式）。

3. 验证全局主题配置 #

确保项目已正确导入Spartacus全局主题样式，且主题变量（如颜色、字体等）配置完整，ASM组件依赖这些全局主题属性渲染样式。

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