vue在頁(yè)面開(kāi)發(fā)中很常用，相信大家在開(kāi)發(fā)過(guò)程中都有過(guò)加載css的需求，而css加載順序也是一個(gè)很重要的問(wèn)題。下面我們就一起來(lái)詳細(xì)了解一下vue加載css的順序。

// 假設(shè)我們有兩個(gè)css文件 分別是 a.css 和 b.css
// 我們?cè)诮M件中分別引入

Vue加載css樣式表采用的是從后向前順序加載的方式。也就是說(shuō)，如果我們?cè)诮M件中先引入了 b.css ，后引入了 a.css ，那么最終渲染頁(yè)面時(shí)，a.css會(huì)覆蓋掉b.css中一些重復(fù)的樣式。

同時(shí)，我們還需要注意到的一點(diǎn)是，在我們引入的樣式表之外可能還會(huì)存在其他的一些樣式表，比如組件庫(kù)、全局樣式等等。這些樣式表可能覆蓋了我們引入的樣式表。那么如何保證我們自己引入的樣式表能夠生效呢？

這里我們需要了解到scoped。當(dāng)我們?cè)趘ue組件中設(shè)置scoped屬性后，意味著該組件的所有樣式只在該組件內(nèi)生效，不會(huì)影響到全局樣式。而未設(shè)置scoped的樣式表是全局的，會(huì)對(duì)整個(gè)頁(yè)面都產(chǎn)生影響。

所以，在組件中加載樣式表時(shí)，如果需要設(shè)置scoped屬性，我們就要注意樣式的加載順序了。因?yàn)閟coped樣式比全局樣式優(yōu)先級(jí)更高，所以如果我們先引入了全局樣式，在后面又引入了scoped樣式，那么就會(huì)出現(xiàn)scoped樣式無(wú)法生效的情況。

總的來(lái)說(shuō)，我們?cè)趘ue中引入樣式表的順序以及是否設(shè)置scoped屬性都是需要注意的。如果我們對(duì)樣式表的加載順序和scoped屬性的使用了解清楚，那么我們就可以完美地控制vue組件中的樣式了。