如何调试Vue.js scoped样式未生效问题（Vuetify开发场景）

1. 修复.description类挂载错误 #

你当前将class="description"写在了slot的<template>标签上：

<!-- 错误写法：template为虚拟占位标签，渲染后不会生成真实DOM，绑定的class、style全部无效 -->
<template v-slot:item.description="{ item }" class="description" style="overflow-wrap: normal">
    {{ item.description }}
</template>

Vue中带v-slot的template标签仅做逻辑占位，编译后不会出现在真实DOM树中，绑定在其上的属性不会被渲染。需要将class移到template内部的真实DOM节点上，修改如下：

<template v-slot:item.description="{ item }">
    <span class="description">{{ item.description }}</span>
</template>

2. 匹配深度选择器对应写法 #

>>> 深度穿透选择器仅对原生CSS（style标签无lang属性）生效，如果你项目使用了SCSS/LESS等CSS预处理器，>>>会被预处理器解析为非法语法，直接导致样式块编译失败。
根据项目环境替换对应深度选择器即可：

• 原生CSS环境：保留>>>写法
• SCSS/LESS预处理器环境：替换为::v-deep

  <style scoped lang="scss">
  ::v-deep .description {
      white-space: nowrap !important;
      color: red;
  }
  
  ::v-deep li a {
      text-decoration: none !important;
  }
  </style>
  

Vue3项目统一推荐使用:deep()语法，写法为:deep(.description) { /* 样式规则 */ }

3. 其他排查方向 #

• 检查目标元素是否被传送出当前组件：比如Vuetify的弹窗、下拉菜单默认会被teleport到body节点下，这类脱离当前组件DOM树的节点，scoped样式即使加深度选择器也无法命中，需要将对应样式写到不带scoped标记的style块中。
• 用开发者工具定位问题：打开浏览器Elements面板选中目标元素，查看Styles侧边栏：如果完全看不到你写的样式规则，说明选择器未命中/样式编译报错；如果能看到规则但是被划横线标记，说明样式优先级不足，可通过叠加父类选择器提升权重。

内容的提问来源于stack exchange，提问作者code-8