我想設定行內 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>
header .logo svgWebPack 在構建期間看不到任何 SVG，并且在生成的 CSS中不包含規則。
如何做到這一點？
uj5u.com熱心網友回復：
我在這里找到了一個想法：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>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/432253.html