欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue打包上線之后部分CSS不生效問題的解決辦法

 更新時間:2022年12月24日 10:36:53   作者:唔希波西  
在vue項目中開發(fā)環(huán)境的樣式?jīng)]問題,但是打包上線后,樣式不生效,下面這篇文章主要給大家介紹了關(guān)于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框架搭建及應(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é)

    關(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() 之前使用的原因淺析

    Vue.use()在new Vue() 之前使用的原因淺析

    本文通過實例代碼給大家介紹了為什么Vue.use()在new Vue() 之前使用,需要的朋友可以參考下
    2019-08-08
  • Django+Vue實現(xiàn)WebSocket連接的示例代碼

    Django+Vue實現(xiàn)WebSocket連接的示例代碼

    這篇文章主要介紹了Django+Vue實現(xiàn)WebSocket連接的示例代碼,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-05-05
  • vscode不支持nvue語法高亮的解決辦法(圖文詳解)

    vscode不支持nvue語法高亮的解決辦法(圖文詳解)

    這篇文章主要介紹了vscode不支持nvue語法高亮的解決辦法,用vscode開發(fā)uniapp會遇到用.nvue開發(fā)的時候。但是vscode并沒有提供.nvue的語法高亮,這篇文章給剛用vscode寫.nvue的讀者,需要的朋友可以參考下
    2023-02-02
  • vue如何基于el-table實現(xiàn)多頁多選及翻頁回顯過程

    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利用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)方案

    本篇文章主要介紹了詳解基于vue-router的動態(tài)權(quán)限實現(xiàn)方案,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-09-09
  • Vue?element-ui?el-cascader?只能末級多選問題

    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)加載組件

    在Vue中,你可以使用動態(tài)import()語法來動態(tài)加載組件,動態(tài)導(dǎo)入允許你在需要時異步加載組件,這樣可以提高應(yīng)用程序的初始加載性能,本文給大家介紹在Vue中使用動態(tài)import()語法動態(tài)加載組件,感興趣的朋友一起看看吧
    2023-11-11

最新評論