css - 使用嵌套选择器和 vuejs CSS 模块

Question

使用 vuejs css modules 时是否可以使用嵌套的 css 选择器？ ？

例如，我想限定此 css 的范围(以便 id 不影响子组件):

.list {
    ...

    .item {
       ...
     }
}

在文档中我只能看到非嵌套示例，但这是否方便，因为我需要将它们命名为类似于 BEM 的 .list-item。但是，如果我使用 BEM，那么使用 css 模块就没有意义了，是吗？

Answer 1

是的，可以使用嵌套的 css 选择器，因此它们不会影响子组件；使用 css 模块。

您需要使用预处理器来启用嵌套，LESS或 SASS .

如果使用 Single File Components你的组件看起来像这样

<template>
  <ul :class="$style.list">
    <li :class="$style.item"></li>
  </ul>
</template>

<!--       Or lang="less" -->
<style module lang="scss">
.list {
    ...

    .item {
       ...
     }
}
</style>