带有:: ng-deep的角度组件样式中的@import样式

Question

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

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

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

但这不起作用-好像在中@import被忽略了:host ::ng-deep。我通过直接在方括号内复制css文件的内容来解决该问题，但是它的效果不是最佳，就好像参考包已升级一样，那么我将不得不用新样式手动替换内容。

我只能想到的其他解决方法是将视图封装更改为，None但由于它使样式成为全局样式，因此看起来甚至更糟。

有没有更好的选择？

Answer 1

对我来说，在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，例如在我的情况下，为SimpleMDE Markdown编辑器生成的HTML ）的样式应为预期的。

一些背景：

带有后缀的@import实际也会被处理。每当实例化我的组件时，就会将作用域<style>元素添加到<head>：

请注意，这会产生的作用域_ngcontent，而对于却无法很好地起作用::ng-deep，从而使动态子内容没有样式。

但是，没有后缀，将得到：

上方，作用域使用_nghost。

我想知道这是错误还是已记录的行为。（也许Sass文件甚至有所不同？@importCSS的使用是非标准行为，将在以后的LibSass版本中删除 ...）

请注意这:host是必需的。仅带有文件后缀::ng-deep的结果是相同的。但是，如果没有文件后缀，则在不使用样式时，样式将完全不起作用：:host

看着渲染的网页，我非常愚蠢地认为这也行得通（并且自己的样式仍然很好地确定了范围，因此这是部分成功的）。但是，在不使用时，可以有效导入第三方CSS，而不会进行任何范围界定:host。

Answer 2

尝试这个：

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