Ionic+Angular：::ng-deep在CSS生效但在SASS/SCSS中失效

我之前也碰到过一模一样的情况，在Angular5+Ionic3的项目里切换到SCSS后，原本能修改Angular Material样式的::ng-deep突然就罢工了，折腾了好一阵才捋清楚原因，给你几个可行的解决方案：

1. 用:host ::ng-deep代替单独的::ng-deep #

在组件的SCSS文件里，单独写::ng-deep会因为Ionic/Angular的样式封装机制失效，必须结合:host（代表当前组件的宿主元素）来使用，这样才能让样式正确穿透到子组件（包括Angular Material的组件）。

比如原来CSS里的有效代码：

::ng-deep .mat-progress-bar-fill::after {
  background-color: #1976d2;
}

换成SCSS后要改成：

:host ::ng-deep .mat-progress-bar-fill::after {
  background-color: #1976d2;
}

2. 检查SCSS嵌套层级 #

别把::ng-deep嵌套在过深的局部选择器里，比如这样写可能会导致选择器权重异常或者作用范围被限制：

.my-custom-container {
  .inner-element {
    ::ng-deep .mat-button {
      // 这里的样式大概率无法生效
    }
  }
}

尽量把:host ::ng-deep放在组件SCSS的顶层，直接包裹目标选择器。

3. 尝试全局SCSS文件 #

如果组件内的写法还是不行，可以把需要修改的Material样式移到全局SCSS文件（比如src/app/app.scss）里，直接用::ng-deep：

::ng-deep .mat-button {
  border-radius: 8px;
}

不过这种方式要注意样式污染，尽量给目标选择器加上更具体的前缀（比如结合页面类名），避免影响全局的Material组件。

4. 确认样式编译配置 #

检查你的.angular-cli.json里的styleExt已经设置为scss，而且没有其他自定义的编译规则干扰SCSS的处理。另外组件的encapsulation默认是ViewEncapsulation.Emulated，这个不需要修改，保持默认即可。

你可以先试试第一种方法，大部分情况下这个就能解决问题，毕竟Ionic3的样式封装对::ng-deep的写法有严格要求~

内容的提问来源于stack exchange，提问作者P.S.