带有范围CSS的Vue.js样式v-html

Question

如何使用vue-loader使用范围限定的CSS为v-html内容设置样式？

简单示例：component.vue

<template>
  <div class="icon" v-html="icon"></icon>
</template>
<script>
  export default {
    data () {
      return {icon: '<svg>...</svg>'}
    }
  }
</script>
<style scoped>
  .icon svg {
    fill: red;
  }
</style>

产生HTML <div data-v-9b8ff292="" class="icon"><svg>...</svg></div>

生成CSS .info svg[data-v-9b8ff292] { fill: red; }

如您所见，v-html内容没有data-v属性，但是生成css具有svg的data-v属性。

我知道这是vue-loader的预期行为（https://github.com/vuejs/vue-loader/issues/359）。并在本期中提到了后代选择器。但是如您所见，我在CSS中使用了它，但是它没有用。

如何为v-html内容设置样式？

Answer 1

我正在使用vue-loader 15.9.1. 该>>>解决方案对我不起作用（无效），而该/deep/方法导致构建错误......

这是有效的：

.foo ::v-deep .bar { color: red; }

Answer 2

将/deep/选择器与 SCSS 结合使用对我来说不起作用，但后来我尝试使用::v-deep选择器

例如

::v-deep a {
  color: red;
}

看这个答案

Answer 3

如我在这里的答案所述：

新版本的vue-loader（从版本12.2.0起）允许您使用“深度作用域” css。您需要以这种方式使用它：

<style scoped>现在支持可以使用>>>组合器影响子组件的“深度”选择器：

.foo >>> .bar { color: red; } 将被编译成：

.foo[data-v-xxxxxxx] .bar { color: red; }

关于更多的信息发布页面的vue-loader

Answer 4

AS Sarumanatee 说如果接受的答案不起作用，请尝试：

.foo /deep/ .bar { color: red; }