Vue.js style v-html with scoped css
I am using vue-loader 15.9.1
. The >>>
solution did not work for me (no effect) whereas the /deep/
method resulted in building errors...
Here is what worked instead:
.foo ::v-deep .bar { color: red; }
AS Sarumanatee said if the accepted answer doesn't work try:
.foo /deep/ .bar { color: red; }
As stated in my answer here:
New version of vue-loader
(from version 12.2.0) allows you to use "deep scoped" css. You need to use it that way:
<style scoped>
now support "deep" selectors that can affect child components using the>>>
combinator:
.foo >>> .bar { color: red; }
will be compiled into:
.foo[data-v-xxxxxxx] .bar { color: red; }
More informations on the release page of vue-loader