關於.vue文件中style的scoped屬性

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>