2017-06-05 85 views
2

我试图找出它的所有编译后Angular 2对其Css使用的顺序。Angular 2 cli SCSS/CSS订单

我想解决的是它从各个组件获取所有SCSS文件,然后将它们添加到主styles.scss文件之后?这似乎是显而易见的事情,但它是否倒过来,先把组件样式放到主要样式上?

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

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

回答

0

您可能需要了解ViewEncapsulation如何工作以及其他一些事情。这可能帮助:

https://scotch.io/tutorials/all-the-ways-to-add-css-to-angular-2-components

+0

感谢Fahah,我读过那篇文章,但它并没有真正说出将什么顺序排列在一起。我只是试图在一个沼泽标准Angular cli项目中工作,如果我在我的主要中有一些样式样式。scss文件和我的component.scss文件中的一些组件样式,webpack在创建bundle时将它们放入什么顺序 –

1

一般来说,我们没有确保一个给定的顺序风格。组件样式(默认为)将独立于其他组件中的其他样式以及处理样式的顺序工作。

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

角度造型的主要目标之一是提供风格封装,这意味着与该组件关联的SASS文件上的样式仅适用于该样式。

要理解它是如何工作的,以及为什么在一般我们并不需要担心的风格顺序,让我们以一个例子这种风格在组件SASS文件:

.active { 
    border-radius:4px; 
} 

这将转化在运行时是这样的:

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

尖括号内善有善报是独特属性标识符增加的风格和保证的特殊性它仅适用于该特定组件的模板内的元素。

该机制的主要优点之一是组件样式处理的顺序不是关键,因为唯一标识符将确保它们不会干涉。

注:有办法没有,如果需要

看一看这个video看到这一机制的行动的更多细节应用到风格独特的ID。