解决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>