css功能

深度选择器

<style scoped>
.a :deep(.b) {
  /* ... */
}
</style>

插槽选择器

<style scoped>
:slotted(div) {
  color: red;
}
</style>

全局选择器

<style scoped>
:global(.red) {
  color: red;
}
</style>

混合使用局部与全局样式

同一个SFC两个style标签：

<style>
/* 全局样式 */
</style>

<style scoped>
/* 局部样式 */
</style>

css Module

<template>
  <p :class="$style.red">This should be red</p>
</template>

<style module>
.red {
  color: red;
}
</style>