带有 ::ng-deep 的 Angular 组件样式中的 @import 样式答案

【问题标题】：@import styles in angular component's styles with ::ng-deep带有 ::ng-deep 的 Angular 组件样式中的 @import 样式
【发布时间】：2018-07-26 04:21:49
【问题描述】：

使用 Angular 5，带有 scss 的 angular-cli。

我正在创建使用 3rd 方组件 (angular-tree-component) 的角度组件。我需要为树导入样式。由于 Angular 中的样式隔离（使用默认的模拟视图封装），实现它的唯一方法是使用 ::ng-deep，如下所示：

:host ::ng-deep {
    @import '~angular-tree-component/dist/angular-tree-component.css';
}

但这不起作用 - 看起来@import 在:host ::ng-deep 中被忽略了。我通过将 css 文件的内容直接复制到方括号中来解决它，但它不是最理想的，好像引用的包已升级，然后我必须手动将内容替换为新样式。

我能想到的唯一其他解决方法是将视图封装更改为None，但它似乎更糟糕，因为它使样式全局化。

还有更好的选择吗？

【问题讨论】：

包括.css 扩展会产生完全不同的行为：参见sass-lang.com/documentation/file.SASS_REFERENCE.html#import

标签： angular angular-cli

【解决方案1】：

试试这个：

/deep/ {
    @import '~angular-tree-component/dist/angular-tree-component.css';
}

【讨论】：

虽然这可能似乎起作用，但请查看 HTML 以确保样式仍处于范围内。在我的测试中，从:host ::ng-deep 中省略:host 会导致CSS 被导入而根本没有任何作用域。（在我的情况下，这看起来不错，但这就像一个人将文件添加到全局 styles 中的 angular.json 以用于 Angular CLI 6 项目。）

【解决方案2】：

对我来说，在 Angular CLI 6 项目中，不包括文件后缀时一切正常。就像实际文件是simplemde.min.css:

:host ::ng-deep {
    // For proper scoping, do not include the .css file suffix here
    @import '~simplemde/dist/simplemde.min';
}

因此，上述工作不需要encapsulation: ViewEncapsulation.None。它还使非作用域内容（通常是在运行时在 Angular 之外创建的 HTML，例如在我的例子中为 the SimpleMDE Markdown editor 生成的 HTML）按预期设置样式。

一些背景：

加上后缀，@import 实际上也被处理了；每当我的组件被实例化时，一个作用域 <style> 元素就会被添加到 <head>：

请注意，这会产生 _ngcontent 的范围，而这不适用于 ::ng-deep，从而使动态子内容没有样式。

但是，如果没有后缀，则会得到：

以上，范围使用_nghost。

我想知道这是一个错误，还是记录在案的行为。（也许 Sass 文件的情况甚至有所不同？使用 @import 处理 CSS is non-standard behaviour which will be removed in future versions of LibSass...）

请注意，:host 是必需的。只有::ng-deep 的结果 with 文件后缀是相同的。但是没有文件后缀的样式在不使用:host时根本没有作用域：

查看呈现的网页，我非常愚蠢地认为这也有效（并且自己的样式仍然很好地限定了范围，因此这是部分成功）。但是在不使用 :host 时，第三方 CSS 会被有效地导入而没有任何作用域。

【讨论】：