解決vue組件間相同命名的class樣式干擾的問題

問題描述

比如在文件a.vue中，有以下樣式：

<style>  .
  .main {    
    height: 38px; 
  }
</style>

在文件b.vue中，有以下樣式：

<style>  .
  .main {    
    height: 20px; 
  }
</style>

這兩個不同文件擁有相同命名的樣式，則會相互干擾，

解決辦法

使用scoped

爲樣式添加scoped，如下：

<style scoped>  .
  .main {    
    height: 38px; 
  }
</style>

這樣該樣式只對本頁面起效，但這可能會導致父組件無法控制子組件的樣式，整個應用樣式發生變化。

單一命名

既然問題產生的原因是命名重複了，那我們可以嘗試爲樣式起不同的命名，比如以文件路徑+class名稱作爲命名，如下：

在a.vue文件中：

<style lang="scss"> 
.a_main {    
  height: 38px; 
}
</style>

在b.vue文件中：

<style lang="scss"> 
.b_main {    
  height: 38px; 
}
</style>