Working with nested selectors & vuejs css modules

Question

Is it possible to work with nested css selectors when using vuejs css modules?

For example, I want to scope this css (so that id does not affect child components):

.list {
    ...

    .item {
       ...
     }
}

In the documentation I could see only not-nested examples, but is it at all convenient, since I'll need then name them like .list-item which resembles BEM. But if I use BEM there is no point in using css modules, is there?

Answer 1

Yes, it's possible to work with nested css selectors so they will not affect child components; use css modules.

You need to use a preprocessor to enable nesting, either LESS or SASS.

If using Single File Components your component would look something like this

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

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

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