CODEWITHSUNDEEP
cssvue.jssass
Maxiss
Maxiss

Reputation: 1056

VueJS - add css style with v-html

I would like to add html content from the database (so that a part of the page content can be changed externally).

How to add SCSS styling? I use v-html like this but I ahve no idea how to add the style:

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

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

I would prefer not to add the SCSS part in the vuejs style and I already have some other CSS for the other part of the code, but if necessary, the style could be defined in these assets

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

I found some answers but it doesn't seem like the style comes from another source Vue.js style v-html with scoped css or Add CSS style to v-html

Upvotes: 2

Views: 2900

Answers (1)

selfagency
selfagency

Reputation: 1578

When using scoped CSS, Vue creates dynamically generated selectors to reference elements. However, v-html content does not get dynamically generated selectors, because Vue is not dynamically creating that HTML, but instead just dumping it in. Therefore, if you're using v-html, scoped styles defined within the parent component(s) will not be applied to the child components without the use of deep selectors.

You either need to keep your styles global, import your stylesheet via your Webpack config so that the classnames aren't altered by Vue to match the Vue instances' dynamic selectors, or take the styles specific to the v-html child elements and rewrite them to use deep selectors.

Upvotes: 7

Related Questions