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

As stated in my answer here:

新版[Command] number（版本12.2.0）允许您使用＆＃34;深度范围＆＃34; CSS。你需要这样使用它：

vue-loader现在支持＆＃34;深＆＃34;可能影响孩子的选择器   使用<style scoped>组合子的组件：

>>>将编译为：

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

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

的the release page的更多信息

Answer 2

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

这是行之有效的：

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

Answer 3

在 SCSS 中使用 /deep/ 选择器对我不起作用，但后来我尝试使用 ::v-deep 选择器

例如

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

见this答案

Answer 4

如果接受的答案无效，请输入AS Sarumanatee，

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

Answer 5

您应该简单地打开没有作用域属性的新 <style> </style>。

带有作用域css的Vue.js样式v-html

5 个答案: