如何理解Scoped CSS

发布网友发布时间：2024-09-27 10:52

共1个回答

热心网友时间：2024-10-03 04:13

Scoped CSS和CSS Module是两种解决CSS模块化问题的有效工具。CSS Module通过编码转换类名，如将“.example”变为“[data-v-xxxxxx].example”，确保了类名的唯一性，从而避免了样式冲突。这种转换使得开发阶段可以自由使用各类样式名称，即使同名也不会引起冲突。

Scoped CSS的策略是通过HTML标签的属性限定样式范围。例如，".example"会被转换为"data-v-xxxxxx".example"，这样，example的样式仅限于data-v-f3f3eg9属性的HTML标签，从而保持了样式的一致性和独特性。

官方文档中提到，使用Scoped CSS后，父组件样式不会穿透到子组件，但子组件根节点会同时受到父组件和子组件Scoped CSS的影响。这允许父组件从布局角度调整子组件根元素的样式，以满足布局需求。

实验显示，父组件的样式默认只影响直接子组件。比如，定义在Level1.vue的.level样式只作用于Level2.vue，但不作用于Level3.vue的孙子组件。若想让样式影响所有子组件，可以使用">>>"符号，如.level: { color: 'red' }。

注意，预处理器可能无法正确解析">>>"，这时可以使用"/deep/"或"::v-deep"。在某些场景下，例如第三方插件的子组件，即使不能直接修改代码，Scoped CSS的这种方式也十分有用。

在实践中，Scoped CSS并不排斥全局样式。当特定情况下无法使用Scoped CSS时，可以考虑使用普通的全局样式定义。最后，使用Scoped CSS时要留意CMD可能给出的警告，并进行相应调整以消除警告。