Vue打包上線之后部分CSS不生效問題的解決辦法
用vue開發(fā)的時候，本地開發(fā)所有的樣式都能生效，但是打包之后就會有部分樣式失效，且在瀏覽器中F12得時候那個屬性值并沒有變化。
我這邊出現(xiàn)的問題是F12走查發(fā)現(xiàn)影響的css樣式來自static\css\chunk-4be4624ac.css是通過打包生成的。所以判斷是打包生成樣式集成有部分影響到了。
有以下方案都可以試下
1 .首先需要排查各個頁面的是否加入scoped屬性
css樣式只能用于當(dāng)前的Vue組件，可以使組件的樣式不相互污染。如果一個項目的所有style標(biāo)簽都加上了scoped屬性，相當(dāng)于實現(xiàn)了樣式的模塊化
2./deep/ 或者是 !important
/deep/,給這個類名改變樣式,這樣如果頁面出現(xiàn)多個同樣的組件,不會導(dǎo)致頁面樣式混亂,改變之后的樣式是這樣的
!important，作用是提高指定樣式規(guī)則的應(yīng)用優(yōu)先權(quán)（優(yōu)先級）
3.main.js樣式引入順序問題
有時候我們發(fā)現(xiàn)組件內(nèi)的樣式?jīng)]有生效，可能是被第三方組件樣式覆蓋了，main.js中引入router放在最后，就可以實現(xiàn)組件樣式在第三方樣式之后渲染。
4.出現(xiàn)這個問題以上方法我都試過還是不行！所以我直接通過id來綁定修改優(yōu)先級高
總結(jié)
到此這篇關(guān)于Vue打包上線之后部分CSS不生效問題解決的文章就介紹到這了,更多相關(guān)Vue打包上線部分CSS不生效內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue-admin-template框架搭建及應(yīng)用小結(jié)
?vue-admin-template是基于vue-element-admin的一套后臺管理系統(tǒng)基礎(chǔ)模板（最少精簡版），可作為模板進行二次開發(fā)，這篇文章主要介紹了vue-admin-template框架搭建及應(yīng)用,需要的朋友可以參考下2023-05-05
關(guān)于Vue Router的10條高級技巧總結(jié)
這篇文章主要給大家總結(jié)介紹了關(guān)于Vue Router的10條高級技巧，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-05-05
本文通過實例代碼給大家介紹了為什么Vue.use()在new Vue() 之前使用,需要的朋友可以參考下2019-08-08
Django+Vue實現(xiàn)WebSocket連接的示例代碼
這篇文章主要介紹了Django+Vue實現(xiàn)WebSocket連接的示例代碼,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
這篇文章主要介紹了vscode不支持nvue語法高亮的解決辦法,用vscode開發(fā)uniapp會遇到用.nvue開發(fā)的時候。但是vscode并沒有提供.nvue的語法高亮，這篇文章給剛用vscode寫.nvue的讀者，需要的朋友可以參考下2023-02-02
vue如何基于el-table實現(xiàn)多頁多選及翻頁回顯過程
在最近的一個項目中我需要實現(xiàn)表格的翻頁,并且還要實現(xiàn)全選、多選功能,下面這篇文章主要給大家介紹了關(guān)于vue如何基于el-table實現(xiàn)多頁多選及翻頁回顯過程的相關(guān)資料,需要的朋友可以參考下2022-12-12
Vue利用computer解決單項數(shù)據(jù)流的問題詳解
Vue 是一個非常流行和強大的前端框架，它讓我們可以用簡潔和優(yōu)雅的方式來構(gòu)建用戶界面，今天我們來分享一個 Vue 中非常經(jīng)典的問題，也是一個非常實用的技巧，希望對大家有所幫助2023-07-07
詳解基于vue-router的動態(tài)權(quán)限控制實現(xiàn)方案
本篇文章主要介紹了詳解基于vue-router的動態(tài)權(quán)限實現(xiàn)方案，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
Vue?element-ui?el-cascader?只能末級多選問題
這篇文章主要介紹了Vue?element-ui?el-cascader?只能末級多選問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
在Vue中使用動態(tài)import()語法動態(tài)加載組件
在Vue中,你可以使用動態(tài)import()語法來動態(tài)加載組件,動態(tài)導(dǎo)入允許你在需要時異步加載組件,這樣可以提高應(yīng)用程序的初始加載性能,本文給大家介紹在Vue中使用動態(tài)import()語法動態(tài)加載組件,感興趣的朋友一起看看吧2023-11-11