带有作用域 css 的 Vue.js 样式 v-html [英] Vue.js style v-html with scoped css

查看：23 发布时间：2021/9/20 19:02:32 vue.js vue-loader

本文介绍了带有作用域 css 的 Vue.js 样式 v-html的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

How can I style v-html content with scoped css using vue-loader?

简单例子:组件.vue

Simple example: 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] { 填充:红色；}

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

As you can see v-html content don't have data-v attribute, but generate css have data-v attribute for svg.

我知道这是 vue-loader 的预期行为 (https://github.com/vuejs/vue-loader/issues/359).在这个问题中提到了后代选择器.但正如你所看到的，我在我的 css 中使用了它，但它不起作用.

I know this is expected behavior for vue-loader (https://github.com/vuejs/vue-loader/issues/359). And in this issue descendent selectors mentioned. But as you can see I use it in my css and it's not worked.

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

How can I style v-html content?

带有作用域 css 的 Vue.js 样式 v-html [英] Vue.js style v-html with scoped css

问题描述

推荐答案