Vue.js 风格的 v-html 和范围内的 css

Question

如何使用 vue-loader 使用范围内的 css 设置 v-html 内容的样式？

简单的例子： 组件.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

正如我在这里的回答所述：

新版本的

vue-loader

（从版本12.2.0开始）允许您使用“深层范围”CSS。你需要这样使用它：

<style scoped>

现在支持可以影响子级的“深度”选择器 使用

>>>

组合器的组件：

.foo >>> .bar { color: red; }

将被编译为：

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

更多信息请参见vue-loader

的

发布页面

Answer 3

将

/deep/

选择器与 SCSS 一起使用对我来说不起作用，但后来我尝试使用

::v-deep

选择器

例如

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

参见这个答案

Answer 4

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

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

Answer 5

使用

:deep {}

根据您的情况，您应该这样做：

<template>
   <div class="icon" v-html="icon"></div>
</template>

<style scoped>
.icon {
   :deep {
      svg {
         fill: red;
      }
   }
}
</style>