在
vue组件中我们我们经常需要给style添加scoped来使得当前样式只作用于当前组件的节点。添加scoped之后，实际上vue在背后做的工作是将当前组件的节点添加一个像data-v-1233这样唯一属性的标识，当然也会给当前style的所有样式添加[data-v-1233]这样的话，就可以使得当前样式只作用于当前组件的节点。但是 我们需要注意的是：如果我们添加了子组件，同样的，如果子组件也用
scoped标识了，那么在父组件中是不能设置子组件中的节点的样式。若父组件有scoped，子组件没有设置，同样，也是不能在父组件中设置子组件的节点的样式的，因为父组件用了scoped,那么父组件中style设置的样式都是唯一的了，不会作用与其他的组件样式。如果想让每个组件中都有一个公共的
.page类，是必须在App.vue中设置的，App.vue相当于根容器，不设置scoped。所以一般在App.vue中引用公共样式。另外值得注意的一点是，如果使用了
less,sass 的@mixin，然后做了一个 .minin.scss的公共文件，是不能单独放在App.vue中的，每个使用了的组件都需要单独引入。
App.vue
<style lang="scss">
// 不加scoped
// 公共样式放在这里
@import 'src/css/common';
// @import 'src/css/mixin'; 这个不能单独放在这里
// ...
</style>
感谢浏览，欢迎评论指正，相互学习，转载请标明出处。
