VueJS - 使用 v-html 添加 css 样式

Question

我想从数据库添加html内容（以便可以从外部更改部分页面内容）。

如何添加SCSS样式？我像这样使用 v-html 但我不知道如何添加样式：

<div v-html="ct"></div>

async created() {
   this.ct = await this.getPage("blabla");
}

我不想在 vuejs 样式中添加 SCSS 部分，并且我已经为代码的其他部分添加了一些其他 CSS，但如果需要，可以在这些资产中定义样式

<style lang="scss" scoped>
    @import '~assets/styles/core';
</style>

我找到了一些答案，但样式似乎不是来自另一个源 Vue.js style v-html with scoped css 或 Add CSS style to v-html

Answer 1

使用作用域 CSS 时，Vue 创建动态生成的选择器来引用元素。但是，v-html内容不会获得动态生成的选择器，因为 Vue 不会动态创建该 HTML，而只是将其转储进去。因此，如果您使用 ，则v-html在父组件中定义的作用域样式将不会应用于子组件不使用深层选择器。

您要么需要保持样式全局，通过 Webpack 配置导入样式表，以便 Vue 不会更改类名以匹配 Vue 实例的动态选择器，要么采用特定于子元素的样式并重写v-html它们以使用深度选择器。