Sass - Сохранение оригинальной вложенности классов

Question

Извините за неправильное название, не знаю, как его назвать.

Пока я компилирую свой s css, получилось:

.foo {
  ...
  &__bar { ... }
}

он превращается в код ниже, чего и следовало ожидать:

.foo { ... }
.foo__bar { ... }

Моя проблема в том, что мне нужно, чтобы это было так:

.foo { ... }
.foo .foo__bar { ... }

с селектором .foo перед .foo__bar .

Есть ли какой-либо плагин Webpack или другое решение, которое помогло бы решить мою проблему?

Я нашел два способа решить эту проблему, но мне интересно, есть ли что-то, что могло бы спасти мне с дополнительного кода:

.foo {
  ...
  & &__bar { ... }
}

// or

.foo {
  ...
  .foo__bar { ... }
}

Answer 1

Если вы хотите получить это

.foo {...} .foo .foo__bar {...}

Вам нужно написать s css следующим образом:

.foo {...... & .foo__bar {.......}}

Пожалуйста, попробуйте это и посмотрите, работает ли?