Vue打包上線之后部分CSS不生效問(wèn)題的解決辦法
用vue開(kāi)發(fā)的時(shí)候，本地開(kāi)發(fā)所有的樣式都能生效，但是打包之后就會(huì)有部分樣式失效，且在瀏覽器中F12得時(shí)候那個(gè)屬性值并沒(méi)有變化。
我這邊出現(xiàn)的問(wèn)題是F12走查發(fā)現(xiàn)影響的css樣式來(lái)自static\css\chunk-4be4624ac.css是通過(guò)打包生成的。所以判斷是打包生成樣式集成有部分影響到了。
有以下方案都可以試下
1 .首先需要排查各個(gè)頁(yè)面的是否加入scoped屬性
css樣式只能用于當(dāng)前的Vue組件，可以使組件的樣式不相互污染。如果一個(gè)項(xiàng)目的所有style標(biāo)簽都加上了scoped屬性，相當(dāng)于實(shí)現(xiàn)了樣式的模塊化
2./deep/ 或者是 !important
/deep/,給這個(gè)類名改變樣式,這樣如果頁(yè)面出現(xiàn)多個(gè)同樣的組件,不會(huì)導(dǎo)致頁(yè)面樣式混亂,改變之后的樣式是這樣的
!important，作用是提高指定樣式規(guī)則的應(yīng)用優(yōu)先權(quán)（優(yōu)先級(jí)）
3.main.js樣式引入順序問(wèn)題
有時(shí)候我們發(fā)現(xiàn)組件內(nèi)的樣式?jīng)]有生效，可能是被第三方組件樣式覆蓋了，main.js中引入router放在最后，就可以實(shí)現(xiàn)組件樣式在第三方樣式之后渲染。
4.出現(xiàn)這個(gè)問(wèn)題以上方法我都試過(guò)還是不行！所以我直接通過(guò)id來(lái)綁定修改優(yōu)先級(jí)高
總結(jié)
到此這篇關(guān)于Vue打包上線之后部分CSS不生效問(wèn)題解決的文章就介紹到這了,更多相關(guān)Vue打包上線部分CSS不生效內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章為大家詳細(xì)主要介紹了vue之ele多級(jí)聯(lián)組件的使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
在vue中實(shí)現(xiàn)清除echarts上次保留的數(shù)據(jù)(親測(cè)有效)
這篇文章主要介紹了在vue中實(shí)現(xiàn)清除echarts上次保留的數(shù)據(jù)(親測(cè)有效)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-09-09
vue如何把字符串中的所有@內(nèi)容,替換成帶標(biāo)簽的
這篇文章主要介紹了vue如何把字符串中的所有@內(nèi)容,替換成帶標(biāo)簽的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
在vue項(xiàng)目中使用axios發(fā)送post請(qǐng)求出現(xiàn)400錯(cuò)誤的解決
這篇文章主要介紹了在vue項(xiàng)目中使用axios發(fā)送post請(qǐng)求出現(xiàn)400錯(cuò)誤的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要介紹了webpack中的optimization配置詳解,主要就是根據(jù)不同的策略來(lái)分割打包出來(lái)的bundle,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-02-02
vscode中Vue別名路徑提示的實(shí)現(xiàn)
這篇文章主要介紹了vscode中Vue別名路徑提示的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07
vue.js使用v-model實(shí)現(xiàn)父子組件間的雙向通信示例
這篇文章主要介紹了vue.js使用v-model實(shí)現(xiàn)父子組件間的雙向通信,結(jié)合實(shí)例形式分析了vue.js基于v-model父子組件間的雙向通信的具體實(shí)現(xiàn)技巧,需要的朋友可以參考下2020-02-02
ResizeObserver?loop?limit?exceeded報(bào)錯(cuò)原因及解決方案
這篇文章主要給大家介紹了關(guān)于ResizeObserver?loop?limit?exceeded報(bào)錯(cuò)原因及解決的相關(guān)資料,公司項(xiàng)目監(jiān)聽(tīng)系統(tǒng)中發(fā)現(xiàn)一個(gè)高頻錯(cuò)誤ResizeObserver loop limit exceeded,而瀏覽器的console中卻沒(méi)有提示,需要的朋友可以參考下2023-09-09
本篇文章主要介紹了如何去除vue項(xiàng)目中的#及其ie9兼容性，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-01-01
這篇文章主要介紹了vue日期選擇框之時(shí)間范圍的使用，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-05-05