vue使用less关于scope问题

scoped可以实现style只作用于当前的.vue文件

<template>
  <div class="user"></div>
</template>
<script>

</script>

<style lang='less' scoped>
.user {
  color:#333;
}
</style>

上面的文件渲染出的dom结构会是这样的

<div data-v-53795c54 class="user"></div>

css样式是这样的

.user[data-v-53795c54] {
  color:#333;
}

这样就现实了样式只作用于当前.vue文件

注意：添加了scoped的父组件不能修子组件的样式

           同样添加了scoped的子组件不能影响父组件的样式