NuxtJS: styles of inline SVG not exported to resulting CSS-CodePudding

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" ></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?

CodePudding user response：

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