NuxtJS: styles of inline SVG not exported to resulting CSS - vue.js

Question

I want to style inline SVG, but NuxtJS (or better say WebPack) doesn't include this styling into output CSS:
<template>
<header>
<NuxtLink to="/" v-html="logoIco" class="logo"></NuxtLink>
</header>
</template>
<script>
export default {
name: 'HeaderComponent',
computed: {
logoIco() {
return require(`assets/images/logo.svg?raw`);
},
},
};
</script>
<style scoped lang="scss">
header {
.logo {
background: red; // this style included in result CSS
svg {
background: yellow; // and this NOT
}
}
}
</style>
WebPack doesn't see any SVG during build and doesn't include header .logo svg rule in resulting CSS.
How this can be done?

Answer 1

I've found an idea here: https://github.com/nuxt-community/svg-module/issues/72
This code works as expected:
<template>
<header>
<NuxtLink to="/" v-html="logoIco" class="logo">
<component :is="require(`assets/images/logo.svg?inline`)"></component>
</NuxtLink>
</header>
</template>
<script>
export default {
name: 'HeaderComponent',
};
</script>
<style scoped lang="scss">
header {
.logo {
background: red; // this style included in result CSS
svg {
background: yellow; // and this now also included
}
}
}
</style>