16

如何使用 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 内容的样式？

4

4 回答 4

23

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

这是有效的方法：

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

于 2020-05-21T21:21:02.137 回答
15

正如我在此处的回答中所述：

新版本vue-loader（从版本 12.2.0 开始）允许您使用“深度范围”css。你需要这样使用它：

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

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

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

更多信息在发布页面vue-loader

于 2017-06-30T15:06:08.910 回答
7

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

.foo /deep/ .bar { color: red; }
于 2019-12-02T17:50:15.740 回答
4

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

例如

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

看到这个答案

于 2021-03-29T08:44:55.047 回答