在
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>
感謝瀏覽，歡迎評論指正，相互學習，轉載請標明出處。
