vue引入css文件導致全局污染的問題
更新時間：2022年10月22日 09:39:01 作者：四月_h
這篇文章主要介紹了vue引入css文件導致全局污染的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
引入css文件導致全局污染
1.寫在單組件的style里面css樣式，如果標簽內不加scoped可能會影響其他組件的樣式
<style scoped></style>
2.通過import引入的外部css文件，這種引入方式是全局的，也會影響其他組件的頁面樣式
所以可以通過一下方法引入，則不會影響其他組件的頁面樣式
<style src="文件路徑"></style>
vue避免全局樣式污染的正確做法
說明問題：
樣式全局污染產生的bug，會影響到其他頁面原有的樣式，導致每個頁面的樣式互相沖突，如果寫的代碼造成了全局樣式污染，導致別人的頁面每個地方都要去寫自定義頁面的代碼，導致工作量巨大，嚴重的話，領導會讓你當場辭職。
解決方案
1.避免造成全局污染，每個vue頁面必須加上scoped
<style lang="scss" scoped>
.app-container {
flex: 1;
padding: 15px;
box-sizing: border-box;
background: #fafafa;
</style>2.如果要修改element ui里面的底層樣式，需要修改的頁面加上::v-deep
::v-deep {
.el-input,
.el-select {
display: inline-block;
width: 240px;
}
.radioGroup {
width: 240px;
}
}3.如果所有的頁面都復用使用main.js引入public.scss,具體的代碼在這個scss里面寫
import '@/assets/styles/public.scss' // global css
4.如果幾個頁面復用，那么在styles文件夾，里面創(chuàng)建個獨立的scss，復用的代碼寫在這個文件里面。
@import "~@/assets/styles/apply.scss";
以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
如何使用Vue3+elementPlus的Tree組件實現(xiàn)一個拖拽文件夾管理
最近在做一個文件夾管理的功能，要實現(xiàn)一個樹狀的拖拽文件夾面板，里面包含兩種元素，文件夾以及文件，這篇文章主要介紹了使用Vue3+elementPlus的Tree組件實現(xiàn)一個拖拽文件夾管理?,需要的朋友可以參考下2023-09-09
Vue中狀態(tài)管理器(vuex)詳解以及實際應用場景
Vuex是一個專為Vue.js應用程序開發(fā)的狀態(tài)管理模式,下面這篇文章主要給大家介紹了關于Vue中狀態(tài)管理器(vuex)詳解以及實際應用場景的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-11-11
詳解win7 cmd執(zhí)行vue不是內部命令的解決方法
這篇文章主要介紹了詳解win7 cmd執(zhí)行vue不是內部命令的解決方法的相關資料,這里提供了解決問題的詳細步驟，具有一定的參考價值，需要的朋友可以參考下2017-07-07
這篇文章主要介紹了vue全局環(huán)境變量和模式的相關知識，本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-04-04
這篇文章主要介紹了vue-cli 配置資源引用的絕對路徑的問題，本文通過圖文實例相結合給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-09-09
之前在網上看到《藍色拼圖》這款小游戲，作者是用jquery寫的。下面通過本文給大家分享基于vue.js編寫藍色拼圖小游戲，一起看看實現(xiàn)代碼吧2017-03-03
解決vue axios的封裝 請求狀態(tài)的錯誤提示問題
今天小編就為大家分享一篇解決vue axios的封裝 請求狀態(tài)的錯誤提示問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
Vuejs 組件——props數(shù)據(jù)傳遞的實例代碼
本篇文章主要介紹了Vuejs 組件——props數(shù)據(jù)傳遞的實例代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下。2017-03-03
這篇文章主要介紹了vue+element下拉列表默認值問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-06-06
el-table實現(xiàn)轉置表格的示例代碼(行列互換)
這篇文章主要介紹了el-table實現(xiàn)轉置表格的示例代碼(行列互換),本文結合示例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧2024-02-02