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

Question

使用vuejs css 模块时是否可以使用嵌套 css 选择器？

例如，我想确定此 css 的范围（以便 id不会影响子组件）：

.list {
    ...

    .item {
       ...
     }
}

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

Answer 1

是的，可以使用嵌套的 CSS 选择器，这样它们就不会影响子组件；使用CSS模块。

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

如果使用单文件组件，您的组件将如下所示

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

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

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