vue的less编译出的class没有hash?

Question

vue中使用less

<el-container class="content">
    xxx
</el-container>

<style scoped lang="less">
.content {
  display: flex;
  flex-direction: column;
  flex: 1;
}
</style>

编译出的class没加hash，怎么保证同名class覆盖问题呢？

<section class="el-container container" data-v-b301384e="">

</section>

Answer 1

你关注错位置了，你要去看编译后的CSS文件。而不是看编译后的HTML部分。

一般来说会编译成如下结构：

.content[data-v-b301384e] {
  display: flex;
  flex-direction: column;
  flex: 1;
}