在vue項(xiàng)目中熙宇，開發(fā)環(huán)境的樣式?jīng)]問題。但是webpack打包上線后溉浙，樣式不生效烫止，本文將講述如何解決這個(gè)問題。
樣式穿透
vue項(xiàng)目中style標(biāo)簽有個(gè)scoped屬性戳稽，當(dāng)有這個(gè)屬性時(shí)馆蠕，css樣式只會(huì)作用于當(dāng)前組件期升，對(duì)其它組件和子組件不會(huì)生效。這個(gè)屬性為了解決樣式污染的問題播赁。
但是我們需要父組件的樣式也能對(duì)子組件生效，怎么辦吼渡，比如父組件有個(gè)class為a,子組件也有a,如果想要只在父組件寫一次，我們就可以去掉這個(gè)scoped屬性寺酪。
<style>
.a{
width:100px;
}
</style>
嗯坎背，這樣做在開發(fā)環(huán)境中也是可以生效的寄雀，但是用編譯后的dist文件包上線，這個(gè)樣式在子組件就不生效了盒犹。具體為什么不生效耿戚，網(wǎng)上也沒有很明確的說(shuō)法阿趁。筆者也不敢妄下結(jié)論，在此不深究脖阵。
樣式穿透解決辦法
css 有個(gè)深度選擇器>>>，通過(guò)這個(gè)選擇器命黔，父組件的樣式就會(huì)作用到子組件上呜呐，也可以使用/deep/
<style scoped>
>>> .a{
width:100px;
}
</style>
樣式覆蓋
在某些場(chǎng)景悍募，我們可能會(huì)重寫第三方組件庫(kù)的樣式，此時(shí)我們?cè)诮M件中寫上樣式就可以洋魂，但是打包后也不生效。此時(shí)我們可以通過(guò)修改引入順序來(lái)解決副砍。
// UI框架 (最先引入)
import Element from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import App from './App'
// 路由(因?yàn)槲覀冊(cè)诼酚山M件中開發(fā)豁翎，所以最后引入)
import router from './router'
總結(jié)
筆者通過(guò)以上兩個(gè)解決辦法蝉揍，解決了線上樣式丟失的問題，可能其它場(chǎng)景還有其它辦法匙隔。以后遇到了，再進(jìn)行補(bǔ)充熏版。
