Ionic 和 Angular：“::ng-deep”适用于 CSS，但不适用于预处理器 (SASS/SCSS)

Question

我遇到了一个有点奇怪的问题：::ng-deep 与常规 CSS 配合得很好，但是当我尝试切换到 SASS 时，我发现所有使用 ::ng-deep 声明的样式（我需要使用 @ 987654325@ 更改某些 Angular Material 样式），不适用。但所有其他样式都可以正常工作。

需要说，我使用的不是纯 Angular：

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

这是我在 .angular-cli.json 中的defaults：

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

这是我的 sass.config.js（不确定您需要哪些行，所以我会发布完整文件）：

module.exports = {
  outputFilename: process.env.IONIC_OUTPUT_CSS_FILE_NAME,
  sourceMap: false,
  outputStyle: 'expanded',
  autoprefixer: {
    browsers: [
      'last 2 versions',
      'iOS >= 8',
      'Android >= 4.4',
      'Explorer >= 11',
      'ExplorerMobile >= 11'
    ],
    cascade: false
  },
  includePaths: [
    'node_modules/ionic-angular/themes',
    'node_modules/ionicons/dist/scss',
    'node_modules/ionic-angular/fonts',
    'node_modules/font-awesome/scss'
  ],
  includeFiles: [
    /\.(s(c|a)ss)$/i
  ],
  excludeFiles: [
    /*  /\.(wp).(scss)$/i  */
  ],
  variableSassFiles: [
    '{{SRC}}/theme/variables.scss'
  ],
  directoryMaps: {
    '{{TMP}}': '{{SRC}}'
  },
  excludeModules: [
    '@angular',
    'commonjs-proxy',
    'core-js',
    'ionic-native',
    'rxjs',
    'zone.js'
  ]
};

我在迁移过程中是否遗漏了什么？如果您需要更多信息 - 只要问，我会更新问题。

component.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
})

pincode-enter.component.scss 在同一个文件夹中。 pincode-enter.component.scss：

/* 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;
}

以上样式不适用：

我也尝试将此样式移动到全局样式表，但再次失败。

Answer 1

你是否正确地逃避了它们？

style.sass

\:host /deep/ .changed
    color: red

另外，/deep/ is deprecated，所以最好不要使用它。

另一种方法是在您的组件中尝试switching off view-encapsulation，并使用\:host 限定样式，这样样式就不会泄漏。

component.ts

encapsulation: ViewEncapsulation.None

还要检查这些recommendations from Material Team

这个Blog post也很实用，建议使用:ng-deep :)

我们了解组件范围的合法用例 CSS，您的样式会渗透到子组件中。这里有三个 实现这一目标的方法：

1. 使用自定义属性（又名 CSS 变量） — 虽然浏览器还没有完全支持自定义属性，但浏览器 这些功能的实现将为开发人员提供最好的 隔离和灵活性的结合。自定义属性，在 效果，允许组件作者为 其组件的样式；他们让开发人员决定应该是什么 外部样式以及需要保持一致的内容。

2. 使用全局范围的样式表和模拟封装 — 使用传统 CSS，您可以通过以下方式引用组件 名称作为 CSS 选择器的一部分，这将导致应用样式 像往常一样，包括深入到子组件， 假设您使用我们的模拟（默认）视图封装 你的组件。

3. 使用 ::ng-deep — 如果您今天需要这个，请使用 ::ng-deep。这不应与任何 3rd 方工具或新浏览器冲突 发展。我们致力于保持 ::ng-deep 直到 基于标准的方法已获得全行业的支持。

Answer 2

由于 ::ng-deep、/deep/ 和 >>> 将被弃用（或已经被弃用），你有吗？尝试 :host 代替？