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

【问题标题】：VueJS - add css style with v-htmlVueJS - 使用 v-html 添加 css 样式
【发布时间】：2021-01-11 21:59:55
【问题描述】：

我想从数据库中添加 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

【问题讨论】：

【解决方案1】：

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

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

【讨论】：