@使用::ng-deep导入angular组件样式中的样式
使用Angular 5，angular-cli和scss。
我正在创建使用第三方组件(angular-tree-component)的angular组件。我需要导入树的样式。由于angular中的样式隔离(使用默认的模拟视图封装)，实现它的唯一方法是使用::ng-deep，如下所示：
:host ::ng-deep {
@import '~angular-tree-component/dist/angular-tree-component.css';
}但这并不起作用--看起来在:host ::ng-deep中@import被忽略了。我通过直接在括号内复制css文件的内容来解决这个问题，但它并不是最好的，因为如果引用的包升级了，我就必须手动用新样式替换内容。
我能想到的唯一解决办法是将视图封装更改为None，但这似乎更糟糕，因为它使样式变得全局。
还有更好的选择吗？
回答 2
Stack Overflow用户
发布于 2018-05-30 06:39:09
对我来说，在Angular CLI6项目中，如果不包括文件的后缀，一切都会正常工作。例如，如果实际的文件是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之外的运行时创建的超文本标记语言，就像我的例子中为the SimpleMDE Markdown editor生成的超文本标记语言)具有预期的样式。
一些背景知识：
有了后缀，@import实际上也被处理了；每当我的组件被实例化时，就会向<head>添加一个限定了作用域的<style>元素
请注意，这会产生_ngcontent的作用域，而这不适用于::ng-deep，从而使动态子内容没有样式。
但是，如果没有后缀，则会得到：
上面的作用域使用的是_nghost。
我想知道这是一个bug，还是记录在案的行为。(也许Sass文件的情况甚至有所不同？为CSS is non-standard behaviour which will be removed in future versions of LibSass使用@import ...)
请注意，需要使用:host。只使用::ng-deep，结果与带有后缀的文件相同。但是，如果没有文件后缀，则在不使用:host时，样式的作用域将不会被限定
看着渲染的网页，我很容易被愚弄，认为这也是有效的(而且一个人自己的样式仍然很好地限定了范围，所以这是部分成功)。但是当不使用:host时，有效地导入第三方CSS而没有任何作用域。
Stack Overflow用户
发布于 2018-05-16 07:28:57
试试这个：
/deep/ {
@import '~angular-tree-component/dist/angular-tree-component.css';
}https://stackoverflow.com/questions/48806765
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号