Angular 2 cli SCSS/CSS 命令

Question

我正在尝试找出 Angular 2 在全部编译后对其 Css 使用的顺序。

我要解决的问题是它是否从各个组件中获取所有 SCSS 文件，然后将它们添加到主 styles.scss 文件之后？这似乎是显而易见的事情，但它是否以相反的方式进行，将组件样式放在第一位，然后才是主要样式？

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

如果这听起来有点奇怪，我深表歉意，但我无法解决这个问题，而且似乎在任何地方都找不到任何相关信息。

Answer 1

一般来说，我们不必确保给定的样式顺序。组件样式(默认情况下)将独立于其他组件中的其他样式并按照样式的处理顺序工作。

Sass 文件的处理顺序在 CLI 中不保证，有一个顺序是 CLI 插件(基于 Webpack)处理文件的顺序，但可能会随着时间的推移而改变随着 CLI 的发展。

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

要了解这是如何工作的以及为什么通常我们不需要担心样式顺序，让我们以组件 SASS 文件中的这种样式为例:

.active {
    border-radius:4px;
}

这将在运行时被转换成如下形式:

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

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

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

Note: There are ways to do not have that unique ID applied to the style if needed

看看这个video查看此机制的更多详细信息。