欧美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)論