NuxtJS：内联 SVG 样式未导出到结果 CSS

Question

我想设置内联 SVG 的样式，但是 NuxtJS（或者更好的说法是 WebPack）不会将此样式包含到输出中 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 在构建期间看不到任何 SVG，并且在结果 CSS.

中不包含 header .logo svg 规则

如何做到这一点？

Answer 1

我在这里找到了一个主意：https://github.com/nuxt-community/svg-module/issues/72

此代码按预期工作：

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

NuxtJS：内联 SVG 样式未导出到结果 CSS

NuxtJS: styles of inline SVG not exported to resulting CSS

svg

webpack

vue.js

nuxt.js