Question

我正试图弄清楚Angular 2在编译后对其Css使用的顺序。

我正在尝试解决的是它是从各个组件获取所有SCSS文件，然后在主要的styles.scss文件之后添加它们吗？这似乎是显而易见的事情，但它是否反过来并将组件样式放在主要样式之后呢？

我知道如果我在angular-cli.json文件中的styles数组中指定文件，Angular将按顺序处理它们，但显然没有在那里指定组件样式。

道歉，如果这听起来有点奇怪，但我无法解决它，似乎无法找到任何信息。

Answer 1

一般来说，我们不必确保给定的样式订单。组件样式（默认情况下为）将独立于其他组件中的其他样式以及处理样式的顺序。

在CLI中，Sass文件的处理顺序是无法保证，有一个顺序是CLI插件（基于Webpack）处理文件但可能随时间变化的顺序随着CLI的发展。

Angular样式的主要目标之一是提供样式封装，这意味着与该组件关联的SASS文件上的样式仅适用于该样式。

要了解这是如何工作的以及为什么一般我们不需要担心样式顺序，让我们以组件SASS文件中的这种样式为例：< / p>

.active {
    border-radius:4px;
}

这将在运行时转换为类似：

.active[_concontent-c1] {
    border-radius:4px;
}

尖括号内的是唯一属性标识符，它增加了样式的特异性，并确保它仅适用于该特定组件模板内的元素。

此机制的一个主要好处是处理组件样式的顺序并不重要，因为唯一标识符将确保它们不会干扰。

注意：如果需要，有多种方法可以将该唯一ID应用于样式

请查看此video以查看此机制的更多详细信息。

Answer 2

您可能需要了解ViewEncapsulation的工作方式以及其他一些内容。这可能会有所帮助：