如何使用 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>
生成网页 <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 加载器 (https://github.com/vuejs/vue-loader/issues/359( 的预期行为。在本期中提到了后代选择器。但正如你所看到的,我在我的 css 中使用它,但它不起作用。
如何设置 v-html 内容的样式?
我正在使用vue-loader 15.9.1
.>>>
解决方案对我不起作用(没有效果(,而/deep/
方法导致构建错误......
以下是有效的方法:
.foo ::v-deep .bar { color: red; }
正如我在这里的回答中所述:
新版本的vue-loader
(从版本 12.2.0 开始(允许您使用"深度作用域"css。您需要以这种方式使用它:
<style scoped>
现在支持可能影响孩子的"深度"选择器 使用>>>
组合器的组件:
.foo >>> .bar { color: red; }
将被编译成:
.foo[data-v-xxxxxxx] .bar { color: red; }
有关 vue-loader
发布页面上的更多信息
AS Sarumanatee 说,如果接受的答案不起作用,请尝试:
.foo /deep/ .bar { color: red; }
将/deep/
选择器与 SCSS 一起使用对我不起作用,但后来我尝试使用::v-deep
选择器
例如
::v-deep a {
color: red;
}
查看此答案