Работа с вложенными селекторами и модулями vuejs css

Question

Можно ли работать с вложенными селекторами css при использовании vuejs css модулей ?

Например, я хочу охватить эту CSS (чтобы идентификатор не влиял на дочерние компоненты ):

.list {
    ...

    .item {
       ...
     }
}

В документации я мог видеть только не вложенные примеры, но это вообще удобно, потому что мне нужно будет назвать их как .list-item, что напоминает БЭМ. Но если я использую БЭМ, нет смысла использовать модули CSS, не так ли?

Answer 1

Да, можно работать с вложенными селекторами CSS с помощью модулей CSS.

Вам необходимо использовать препроцессор для включения вложения: МЕНЬШЕ или 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>

Answer 2

Да, вложение CSS-селекторов вызывается с помощью scss. Вам нужно будет настроить scss.

Пример создания тега стиля в компоненте vue:

<style scoped lang="scss">

Атрибут scoped указывает, что он применяется только к этому компоненту.

Что касается bem, вы можете делать такие вещи в scss:

.list {
   //styles-a

   &-item {
      //styles-b
   }
}

, который преобразуется в css:

.list {
    //styles-a
}
.list-item {
    //styles-b
}