Question

我使用的是带有封装到组件中的样式的angular 5 app。

如果运行ng serve命令，则所有样式都会在<styles>标记中插入到页面的<head>部分。所以在浏览器devtools中，我只看到像.my-classname[_ngcontent-c25]这样的东西，没有引用它定义的scss文件。

有没有办法检测这个类名定义在哪个组件中？

Answer 1

您可以运行ng serve -sm -ec来查看源地图。但是最新的Angular CLI中存在一个错误。但是在here中，您将能够找到解决方法。

Answer 2

这些属性的确切值并不重要。它们是自动生成的，您永远不会在应用程序代码中引用它们。

没有办法预测输出的结果和输出的稳定性。即使您将规则应用于生成的类，也不保证它在下一个版本中是相同的，因为很少的更改可能会引发样式生成方式的巨大差异。

如果您想应用外部样式（不是在Angular构建过程中构建），您可以解决它设置：

encapsulation: ViewEncapsulation.None

在组件内部。通过这种方式，输出将是稳定且可预测的，但它为CSS冲突打开了大门。