Vue3.2版本對單一檔案元件的style樣式進行了許多升級，如局部樣式、css變數以及樣式暴露給模板使用等。 （學習影片分享：vue影片教學）
一、局部樣式
#當<style> 標籤有scoped attribute 的時候，它的CSS 只會應用到目前元件的元素上：
<template>
<div class="example">hi</div>
</template>
<style scoped>
.example {
color: red;
}
</style>二、深度選擇器
處於scoped 樣式中的選擇器如果想要做更「深度」的選擇，也即：影響到子元件，可以使用:deep() 這個偽類：
<style scoped>
.a :deep(.b) {
/* ... */
}
</style>透過
v-html所建立的DOM 內容不會被作用域樣式影響，但你仍然可以使用深度選擇器來設定其樣式。
三、插槽選擇器
預設情況下，作用域樣式不會影響到<slot/>渲染出來的內容，因為它們被認為是父元件所持有並傳遞進來的。使用:slotted 偽類以確切地將插槽內容作為選擇器的目標：
<style scoped>
:slotted(div) {
color: red;
}
</style>四、全域選擇器
如果想讓其中一個樣式規則套用到全域，比起另外建立一個<style>，可以使用:global 偽類來實作：
<style scoped>
:global(.red) {
color: red;
}
</style>#五、混合使用局部與全域樣式
你也可以在同一個元件中同時包含作用域樣式與非作用域樣式：
<style> /* global styles */ </style> <style scoped> /* local styles */ </style>
#六、支援CSS Modules
<style module> 標籤會被編譯為CSS Modules 並且將產生的CSS 類別鍵暴露給元件：
1、 預設以$style 物件暴露給元件；
<template>
<p :class="$style.red">
This should be red
</p>
</template>
<style module>
.red {
color: red;
}
</style>2、可以自訂注入module名稱
<template>
<p :class="classes.red">red</p>
</template>
<style module="classes">
.red {
color: red;
}
</style>七、與setup一同使用
