Ionic2/3项目SCSS修改p标签样式不生效问题求助

嘿，我来帮你搞定这个样式没生效的问题！在Ionic 2/3里遇到组件内样式不生效，大概率是Angular的样式作用域隔离在搞鬼，下面给你拆解原因和解决方案：

问题原因 #

Ionic页面组件的SCSS默认启用了Angular的ViewEncapsulation（样式封装），这意味着page-home选择器下的样式只会作用到页面组件的宿主元素和它的直接子节点。而<ion-content>是一个独立的Ionic组件，它内部的<p>标签不在当前页面组件的样式作用域范围内，所以你的样式规则无法穿透过去，自然就没效果啦。

解决方案 #

方案1：使用深度选择器穿透样式隔离 #

在Angular中，::ng-deep（替代旧的/deep/或>>>）可以帮你穿透组件的样式封装，让样式作用到子组件内部的元素。修改你的home.scss：

page-home {
  ::ng-deep p {
    font-size: 100px !important;
    color: red;
  }
}

方案2：放到全局样式文件（需注意样式污染） #

如果不想用深度选择器，也可以把样式写到全局的app.scss里，但为了避免影响其他页面的<p>标签，最好给目标元素加个专属类名：

先修改home.html给<p>加类：

<ion-content padding>
  <p class="home-test-text">TEST SHOULD BE 50PX</p>
</ion-content>

然后在app.scss里添加样式：

.home-test-text {
  font-size: 100px !important;
  color: red;
}

方案3：排查Stackblitz缓存问题 #

有时候Stackblitz的缓存会导致样式更新不及时，你可以尝试刷新页面，或者点击编辑器右上角的「Restart Project」按钮重启项目，确保最新的样式被加载。

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