Apologies for the vague title, I couldn't think of a better one.
As I compile my scss, this piece of code:
.foo {
...
&__bar { ... }
}
transforms into the expected output below:
.foo { ... }
.foo__bar { ... }
However, I actually need it to look like this:
.foo { ... }
.foo .foo__bar { ... }
with the .foo selector preceding the .foo__bar.
Is there a Webpack plugin or any other solution that could help me achieve this?
I have come up with two workarounds, but I'm hoping to find something more efficient:
.foo {
...
& &__bar { ... }
}
// or
.foo {
...
.foo__bar { ... }
}