vue引入css文件導(dǎo)致全局污染的問(wèn)題
引入css文件導(dǎo)致全局污染
1.寫(xiě)在單組件的style里面css樣式，如果標(biāo)簽內(nèi)不加scoped可能會(huì)影響其他組件的樣式
<style scoped></style>
2.通過(guò)import引入的外部css文件，這種引入方式是全局的，也會(huì)影響其他組件的頁(yè)面樣式
所以可以通過(guò)一下方法引入，則不會(huì)影響其他組件的頁(yè)面樣式
<style src="文件路徑"></style>
vue避免全局樣式污染的正確做法
說(shuō)明問(wèn)題：
樣式全局污染產(chǎn)生的bug，會(huì)影響到其他頁(yè)面原有的樣式，導(dǎo)致每個(gè)頁(yè)面的樣式互相沖突，如果寫(xiě)的代碼造成了全局樣式污染，導(dǎo)致別人的頁(yè)面每個(gè)地方都要去寫(xiě)自定義頁(yè)面的代碼，導(dǎo)致工作量巨大，嚴(yán)重的話，領(lǐng)導(dǎo)會(huì)讓你當(dāng)場(chǎng)辭職。
解決方案
1.避免造成全局污染，每個(gè)vue頁(yè)面必須加上scoped
<style lang="scss" scoped>
.app-container {
flex: 1;
padding: 15px;
box-sizing: border-box;
background: #fafafa;
</style>2.如果要修改element ui里面的底層樣式，需要修改的頁(yè)面加上::v-deep
::v-deep {
.el-input,
.el-select {
display: inline-block;
width: 240px;
}
.radioGroup {
width: 240px;
}
}3.如果所有的頁(yè)面都復(fù)用使用main.js引入public.scss,具體的代碼在這個(gè)scss里面寫(xiě)
import '@/assets/styles/public.scss' // global css
4.如果幾個(gè)頁(yè)面復(fù)用，那么在styles文件夾，里面創(chuàng)建個(gè)獨(dú)立的scss，復(fù)用的代碼寫(xiě)在這個(gè)文件里面。
@import "~@/assets/styles/apply.scss";
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue?mounted周期中document.querySelectorAll()獲取不到元素的解決
這篇文章主要介紹了vue?mounted周期中document.querySelectorAll()獲取不到元素的解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
關(guān)于新建的vue3項(xiàng)目一直提示代碼格式警告的問(wèn)題
這篇文章主要介紹了關(guān)于新建的vue3項(xiàng)目一直提示代碼格式警告的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
vue+elementUI實(shí)現(xiàn)分頁(yè)效果
這篇文章主要為大家詳細(xì)介紹了vue+elementUI實(shí)現(xiàn)分頁(yè)效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
裝飾者模式在日常開(kāi)發(fā)中的縮影和vue中的使用詳解
這篇文章主要為大家介紹了裝飾者模式在日常開(kāi)發(fā)中的縮影和vue中的使用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-12-12
這篇文章主要介紹了vue之子組件如何修改父組件的值問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-07-07
這篇文章主要介紹了vuejs簡(jiǎn)單驗(yàn)證碼功能,結(jié)合完整實(shí)例形式分析了vue.js驗(yàn)證碼的生成、顯示、校驗(yàn)等相關(guān)操作技巧,需要的朋友可以參考下2019-01-01
這篇文章主要為大家介紹了Vue.js Class與Style綁定的方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2022-01-01
這篇文章主要介紹了TypeScript中集成Tween.js踩坑記錄，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
Vue開(kāi)發(fā)中常見(jiàn)的套路和技巧總結(jié)
這篇文章主要給大家介紹了關(guān)于Vue開(kāi)發(fā)中常見(jiàn)的套路和技巧的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-11-11
這篇文章主要為大家介紹了Vue3中使用Supabase?Auth方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07