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

Posted 2023-02-22

【中文标题】具有作用域 css 的 Vue.js 样式 v-html

【英文标题】：Vue.js style v-html with scoped css

【发布时间】：2017-12-04 07:33:47

【问题描述】：

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

【参考方案1】：

As stated in my answer here:

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

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

.foo >>> .bar color: red; 会被编译成：

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

更多关于the release page 的信息vue-loader

【讨论】：

太棒了，谢谢！绝对应该在文档中提及。

添加是因为它发生在我身上，如果上述方法不起作用，.foo /deep/ .bar 可能会起作用。

上面的 cmets 必须是它自己的答案，在我阅读评论之前，我一直在努力解决这个问题。

这不适用于 vue-loader 15.9.1。有人有同样的问题吗？

【参考方案2】：

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

.foo /deep/ .bar  color: red; 

【讨论】：

这个对我有用，“::v-deep”也是。不知道哪个最好？

【参考方案3】：

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

以下是可行的方法：

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

【讨论】：

其他答案都不起作用，但这是完美的！

非常感谢！只有你的回答有帮助

【参考方案4】：

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

例如

::v-deep a 
  color: red;

见this回答

【讨论】：

有一个 SFC 可以将其更改为 :deep(a)。收到警告[@vue/compiler-sfc] ::v-deep usage as a combinator has been deprecated. Use :deep(<inner-selector>) instead.

@Mrweiner 可以分享链接吗？

看起来这是github.com/vuejs/rfcs/blob/master/active-rfcs/…