Angular 离子型和角型：“：”ng deep“；可用于CSS，但不可用于预处理器（SASS/SCS）

我面临着一个有点奇怪的问题：

：：ng deep

适用于常规CSS，但当我尝试切换到SASS时，我发现所有使用

：：ng deep

声明的样式（我需要使用

：：ng deep

来更改某些角度材质样式）都不适用。但所有其他样式都很好

需要说明的是，我使用的不是纯角度：

"ionic-angular": "3.9.2",
"@angular/*": "5.0.3",
"@ionic-native/*": "4.5.3",
...

以下是我在.angular cli.json中的

默认设置：

{
  ...
  "defaults": {
    "styleExt": "scss", // also tried with "sass"
    "component": {}
  }
}

下面是我的sass.config.js（不确定需要哪一行，所以我将发布完整的文件）：

迁移时我错过了什么吗？如果你需要更多信息，尽管问，我会更新问题

组件。ts:

@Component({
  selector: 'app-pincode-enter',
  templateUrl: './pincode-enter.component.html',
  styleUrls: ['/pincode-enter.component.scss'], // this path is correct, styles without "::ng-deep" works fine
  encapsulation: ViewEncapsulation.None // tried all 3 properties
})

/* Tried both with "::ng-deep" and without */
:host .mat-button-wrapper {
  line-height: 72px;
  background-color: red !important;
  color: yellow !important;
}

:host ::ng-deep .mat-button-wrapper {
  line-height: 72px;
  background-color: red !important;
  color: yellow !important;
}

pincode-enter.component.scss
位于同一文件夹中。
pincode-enter.component.scss:

@Component({
  selector: 'app-pincode-enter',
  templateUrl: './pincode-enter.component.html',
  styleUrls: ['/pincode-enter.component.scss'], // this path is correct, styles without "::ng-deep" works fine
  encapsulation: ViewEncapsulation.None // tried all 3 properties
})

/* Tried both with "::ng-deep" and without */
:host .mat-button-wrapper {
  line-height: 72px;
  background-color: red !important;
  color: yellow !important;
}

:host ::ng-deep .mat-button-wrapper {
  line-height: 72px;
  background-color: red !important;
  color: yellow !important;
}

不应用和以上样式：


我还尝试将此样式移动到全局样式表，但又没有成功。
因为：ng deep，/deep/和>将被弃用（或已经弃用），您尝试过：host吗？
您是否正确地转义了它们

时髦

另外，最好不要用那个

另一种方法是在组件中尝试，并使用
\:host
确定样式的范围，这样样式就不会泄露出去

组件技术

还要检查这些

这也是信息性的，建议使用
：ng deep
：）

我们了解到，组件范围内存在合法的用例
CSS，您的样式穿透子组件。这里有三个
实现此目标的方法：

使用自定义属性（又名CSS变量） — 虽然还没有完全支持自定义属性的浏览器，但浏览器
这些功能的实现将为开发人员提供最佳解决方案
隔离和灵活性的结合。自定义属性，在
因此，允许组件作者为组件定义API曲面
组件的样式；他们让开发者决定应该做什么
外部风格和需要保持一致的内容
使用全局范围的样式表和模拟封装 — 使用传统的CSS，您可以通过
名称作为CSS选择器的一部分，将导致应用样式
就像他们一直做的那样，包括深入到子组件，
假设您在上使用模拟（默认）视图封装
您的组件

用法：：ng deep — 如果您今天需要它，请使用：：ng deep。这不应与任何第三方工具或新浏览器冲突
发展。我们致力于在
基于标准的方法已获得业界的支持

/deep/
和
>
不推荐使用，是的，但不确定
：：ng deep
也不推荐使用。我将在几分钟内试用
：host
。/deep/和>>>是：：ng deep的别名，因此如果是，我建议问题出在集成离子和角度上，因为它在纯角度项目中工作。是的，我在问问题之前已经用封装尝试过这个技巧，但也没有运气。我知道它必须工作，但由于某些原因它不是。你能发布一个与DOM+Shadow域结构不兼容的CSS示例吗？当然，给我一点时间。这真的很难理解发生了什么，但我非常感谢你的帮助。无论如何，upvote。它是在编译时显示错误还是静默失败？没有错误，所有带有
：host:：ng deep…
（我现在在scss上）的样式都不适用（以及其他变体）。发布您的
组件.ts
，
样式.scss
，只有相关部分可以。我曾多次将
css
更改为
sass
，但忘记在
component.ts
文件中更新：）@sabithpocker，我已经更新了问题
encapsulation: ViewEncapsulation.None