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属性后样式不起作用

原因是，css被构建成.user[data-v-53795c54]，但是doc节点依然是普通的<div class="user"></div>，导致样式不能作用在dom上而失效。
原因在引用的组件上，解决的方法是将scoped属性关闭。

scoped关闭时的使用建议

如果需要将scoped关闭，那么style就是作用于整个单页应用
可是我们仍然想要样式之作用于当前的.vue文件，减少对其他文件样式的影响

1. 给template下的根节点加一个class，并基于这个class添加样式

<template>
    <div class="user">
        <p class="name">zaunk</p>
    </div>
</template>
<script>

</script>

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

2. 基于第一条建议，不要有定义两个相同class名称的根节点，因为都作用于整个单页会有一个失效。
3. 不要使用span {}这种做样式设置。因为

<template>
    <div class="user">
        <el-button class="name">zaunk</el-button>
    </div>
</template>
<style lang='less>
.user {
    color:#333;
    span {
        color:#122222;
    }
}
</style>

上面的样式同样会作用于组件el-button，这是很危险的。

开启scoped样式没有起作用的建议

对于没有生效的样式，我们可以新增一个scoped.css的文件在main.js中引用。
普通的css是可以作用于这种dom 节点的。

.user {
    color:#ccc;
}

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

原文地址：https://segmentfault.com/a/1190000010740647?utm_source=tag-newest