VueJS -添加的css样式

Question

我想从数据库中添加html内容(这样页面内容的一部分就可以外部更改)。

如何添加SCSS样式？我像这样使用，但是我不知道如何添加样式：

<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>

我找到了一些答案，但风格似乎不是来自另一个来源-- 带有作用域css的Vue.js样式v-html或将CSS样式添加到v中。

Answer 1

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

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