Angular 14迁移至15后自定义SCSS无法加载，UI异常求助

针对你遇到的 SCSS 语法限制及样式加载问题，可按以下步骤逐一排查修复：

1. 重构 SCSS 引入方式，适配 @use 规则 #

@use 必须置于 SCSS 文件顶层，无法嵌套在选择器内，需调整原有的嵌套引入逻辑：

原 Angular 14 写法（失效）： #

body {
  @import './angular-material/form-field.scss';
  @import './angular-material/label.scss';
}

调整后的 Angular 15 写法： #

方案一：顶层引入 + 混合宏调用（推荐）

先在文件顶层用 @use 引入自定义 SCSS，再在 body 选择器内调用封装好的混合宏：

// 顶层引入自定义 SCSS，可添加命名空间避免冲突
@use './angular-material/form-field.scss' as ff;
@use './angular-material/label.scss' as lbl;

body {
  // 调用自定义样式中的混合宏
  @include ff.custom-form-field();
  @include lbl.custom-label();
}

注：需提前在 form-field.scss、label.scss 中将样式封装为混合宏，例如：

// form-field.scss
@mixin custom-form-field() {
  .mat-form-field {
    // 自定义样式逻辑
    border-radius: 4px;
  }
}

方案二：直接顶层引入全局样式

若自定义 SCSS 本身就是全局样式（无需依赖 body 嵌套），可直接在顶层引入：

// 顶层引入所有自定义样式文件
@use './angular-material/form-field.scss';
@use './angular-material/label.scss';

// 单独设置 body 基础样式（如字体、背景色）
body {
  font-family: Roboto, sans-serif;
  margin: 0;
}

2. 确保样式优先级覆盖 Material 默认样式 #

Angular 15 中 Material 组件的样式优先级可能调整，可通过以下方式保证自定义样式生效：

• 增强选择器特异性：例如用 .app-container .mat-form-field 替代单一的 .mat-form-field
• 若必要，临时使用 !important（仅在无其他方案时采用）
• 检查浏览器开发者工具的「元素」面板，确认自定义样式是否被默认样式覆盖

3. 验证 Angular Material 主题配置 #

确保 Angular 配置中正确加载 Material 主题及自定义样式，且顺序正确（自定义样式需在 Material 主题之后，才能覆盖默认样式）：
在 angular.json 的 styles 数组中调整顺序：

"styles": [
  "node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
  "src/css/angular-material.scss",
  "src/styles.scss"
]

4. 检查组件样式封装模式 #

若 Shared.UserInterface 中的组件使用了视图封装（ViewEncapsulation），需确认样式作用域：

• 若组件样式需全局生效，可在组件元数据中设置 encapsulation: ViewEncapsulation.None
• 优先使用组件宿主选择器 :host 定义组件自身样式，避免全局污染

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