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

简单的例子:

<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

生成css

正如您所见,v-html内容没有data-v属性,但生成的css具有svg的data-v属性.

我知道这是vue loader(https://github.com/vuejs/vue-loader/issues/359)的预期行为.在本期中,我们提到了后代 Select 器.但正如你所见,我在css中使用了它,但它不起作用.

如何设置v-html内容的样式?

推荐答案

As stated in my answer here:

新版本的vue-loader(12.2.0版)允许您使用"深度范围"css.你需要这样使用它:

<style scoped>现在支持"深度" Select 器,可以影响 children

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

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

更多关于vue-loaderthe release page的信息

Vue.js相关问答推荐

使用nuxt I18N验证规则消息翻译

Vutify-v-工具提示-不使用键盘轻击按钮显示

Vue 3 需要 main.js 中的文件

元素不会对react 性props 的更改做出react

我如何使用vuejs访问彼此嵌套的json对象

传单 vue3 组件变体打开错误的标记 - 单击时弹出

如何在 vue js 的一页路由下显示不同的 category._id

在重复表行中

如何从特定索引呈现 v-for

如何在 vue 的 scss 中使用深度 Select 器

使用 v-slot:body 时 Vuetify v-data-table 没有响应

Vuetify 容器不会填充高度

如何在不实例化根实例的情况下使用 vue 组件?

Vue-Router 抽象父路由

我可以使用 vue.js v-if 来判断值是否存在于数组中

未捕获的类型错误:c.querySelectorAll 不是函数

如何在 VueJS 中访问 [__ob__: Observer] 的元素?

Vue.js 处理多次点击事件

Vue中的嵌套循环

如何隔离 Vuetify 全局样式