Angular全局styles.css定义的样式未生效，导入时CssDependency报错如何解决？

报错解决 #

首先删除你在@Component装饰器styleUrls数组中添加的../../../styles.css引用。
全局styles.css已经在angular.json的构建配置中被标记为全局样式入口，它的编译逻辑和组件局部样式完全不同，你将它放到组件的样式引入数组中，会触发loader解析逻辑冲突，这就是你看到CssDependency相关报错的原因，删除该行引用即可解决报错。

全局样式不生效解决 #

全局定义的mat-expansion-panel样式不生效，是因为Angular Material自带组件样式的选择器优先级更高，同时Angular的视图封装机制也会限制外部样式对组件内部的影响，可以通过以下两种方案解决：

• 方案一：调高全局样式优先级
  在全局styles.css中调整选择器权重，覆盖组件默认样式：

/* 全局styles.css */
body mat-expansion-panel {
    margin: 2vh !important;
}

• 方案二：在组件局部样式中使用::ng-deep
  不需要修改全局样式，直接在你的list.component.css中添加以下代码，即可穿透视图封装生效：

/* list.component.css */
:host ::ng-deep mat-expansion-panel {
    margin: 2vh;
}

注：配合:host选择器使用::ng-deep可以避免样式污染全局其他组件。

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