Vue 项目中样式穿透失效：common.css 文件中的 deep 为什么失灵？

在vue项目中的样式穿透难题：common.css文件中的deep为何失灵？

使用深度选择器deep是指定样式穿透特定组件边界的一种方法。但在Google 9.0版本中，开发者发现即使在common.css公共样式文件中使用deep，样式也不生效。

为什么deep穿透失效？

根据回答，问题可能出在common.css文件上，它可能未启用scoped作用域。scoped作用域是一种css功能，可将组件的样式隔离在该组件内，防止其他组件影响其样式。如果common.css中未启用scoped，则deep选择器将无法穿透到组件内部。

解决方法

立即学习“前端免费学习笔记（深入）”；

既然知道了问题出处，解决方案就简单了：

• 在common.css上启用scoped属性：

<style scoped>   /* ...common 样式 ... */ </style>

• 不再使用deep选择器：

common.css中的样式现在将自动应用于所有组件，无需再使用deep选择器。