Vue.js 样式 v-html 与作用域 css

Question

我如何使用 vue-loader 为 v-html 内容设置作用域 css 的样式？

简单的例子: 组件.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 { 颜色:红色； }