CSS @import with v-html

Question

How can I style v-html content with scoped css using @import?

There is an explanation on how to use ::v-deep here, but in my case I'd like to include a CSS file using @import.

I tried the following but it doesn't work:

<template>
  <div v-html="richtext" />
</template>
...
<style lang="scss" scoped>
  @import 'assets/scss/imports/headers.scss';
</style>

I could import the style globally which does work but my goal is to only import it in this richtext component.

Answer 1

I normally do it using the src attribute

<style lang="scss" src="@/assets/scss/imports/headers.scss"></style>