Question

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

我正在创建使用第三方组件（angular-tree-component）的角度组件。我需要为树导入样式。由于角度中的样式隔离（使用默认的模拟视图封装），如何实现它的唯一方法是使用::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，就像在我的情况下为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实际上是在没有任何范围的情况下导入的。

Answer 2

试试这个：

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