css - 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，但如果需要，可以在这些 Assets 中定义样式

<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

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

你要么需要保持你的样式全局，通过你的 Webpack 配置导入你的样式表，这样类名就不会被 Vue 改变以匹配 Vue 实例的动态选择器，或者采用特定于 v- html 子元素和 rewrite them to use deep selectors .