vue引入css文件導致全局污染的問題
更新時間：2022年10月22日 09:39:01 作者：四月_h
這篇文章主要介紹了vue引入css文件導致全局污染的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
引入css文件導致全局污染
1.寫在單組件的style里面css樣式，如果標簽內(nèi)不加scoped可能會影響其他組件的樣式
<style scoped></style>
2.通過import引入的外部css文件，這種引入方式是全局的，也會影響其他組件的頁面樣式
所以可以通過一下方法引入，則不會影響其他組件的頁面樣式
<style src="文件路徑"></style>
vue避免全局樣式污染的正確做法
說明問題：
樣式全局污染產(chǎn)生的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";
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
vue?mounted周期中document.querySelectorAll()獲取不到元素的解決
這篇文章主要介紹了vue?mounted周期中document.querySelectorAll()獲取不到元素的解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要介紹了關于新建的vue3項目一直提示代碼格式警告的問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要為大家詳細介紹了vue+elementUI實現(xiàn)分頁效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
這篇文章主要為大家介紹了裝飾者模式在日常開發(fā)中的縮影和vue中的使用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-12-12
這篇文章主要介紹了vue之子組件如何修改父組件的值問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-07-07
這篇文章主要介紹了vuejs簡單驗證碼功能,結(jié)合完整實例形式分析了vue.js驗證碼的生成、顯示、校驗等相關操作技巧,需要的朋友可以參考下2019-01-01
這篇文章主要為大家介紹了Vue.js Class與Style綁定的方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-01-01
這篇文章主要介紹了TypeScript中集成Tween.js踩坑記錄，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
這篇文章主要給大家介紹了關于Vue開發(fā)中常見的套路和技巧的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-11-11
這篇文章主要為大家介紹了Vue3中使用Supabase?Auth方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-07-07