angular - @import styles in angular components styles with::ng-deep

使用 Angular 5，angular-cli 和 scss。

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

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

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

我能想到的唯一其他解决方法是将 View 封装更改为 None 但它看起来更糟，因为它使样式成为全局样式。

有没有更好的选择？

最佳答案

对我来说，在 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结果与文件后缀是一样的。但是没有文件后缀，当不使用 :host 时，样式根本没有作用域。 :

查看呈现的网页，我被误以为这也有效(并且自己的样式范围仍然很好，所以这是部分成功)。但是当不使用 :host 时，第三方 CSS 被有效地导入而没有任何作用域。 .

关于angular - @import styles in angular components styles with::ng-deep，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48806765/