我最近再優(yōu)化公司的老項(xiàng)目片择。有時(shí)候看的頭大潜的。不得不吐槽一下，樣式層級(jí)特別深字管，實(shí)在想不明白啰挪，前任如何開(kāi)發(fā)的，有那么多力氣寫長(zhǎng)達(dá)10級(jí)的層次嘲叔。（當(dāng)然我寫的也未必就是最好的亡呵。所以要努力，學(xué)習(xí)更好的硫戈！如果能簡(jiǎn)化復(fù)雜的頁(yè)面锰什，那也是一種成長(zhǎng)，所以靜下心來(lái)丁逝，繼續(xù)一點(diǎn)點(diǎn)改造Ｖā）
首先，發(fā)現(xiàn)的問(wèn)題是多個(gè)組件都同時(shí)引入了同一個(gè)css,引入的方式如下
<style >
@import '../*.css';
</style>
因?yàn)槲以贔12的時(shí)候霜幼，發(fā)現(xiàn)一個(gè)樣式寫了很多次嫩码，而且是完全重復(fù)的。所以我看到此種寫法的時(shí)候罪既，認(rèn)為多次引入到全局導(dǎo)致的铸题。于是我修改為(添加了scoped)：
<style scoped>
@import '../*.css';
</style>
那我理解的是每個(gè)都只作用于本頁(yè)面∽粮校可事實(shí)并不是這樣丢间，仍然是全局的樣式，而且在多個(gè)頁(yè)面都引入相同文件猩谊，也只加載了一次千劈。除非這樣寫，在一個(gè)頁(yè)面引入多次牌捷，那么會(huì)是多加載多次墙牌，如下：
<style scoped>
@import '../1.css';
@import '../1.css';
</style>
于是查了資料，說(shuō)明通過(guò)@import *.css 引入的是指向全局的暗甥。 猜測(cè)原因可能跟@import引入的時(shí)候是同步加載的有關(guān)喜滨。（不是很明白）感覺(jué)會(huì)提早走webpack的配置，會(huì)判斷是否為同一個(gè)文件撤防。如果同一個(gè)則只引入一次在全局下虽风。
那如何解決呢？可以通過(guò)如下方式，引入到局部作用域辜膝。
<style scoped src="1.css">
</style>
