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

vue引入css文件導(dǎo)致全局污染的問(wèn)題

 更新時(shí)間:2022年10月22日 09:39:01   作者:四月_h  
這篇文章主要介紹了vue引入css文件導(dǎo)致全局污染的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

引入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)文章

最新評(píng)論