SvelteKit组件内<style>标签样式未生效问题求助

我正在使用SvelteKit开发应用，遇到组件内内联CSS未生效的问题：

• app.html中加载的全局CSS文件可正常工作
• 组件内<style>标签编写的样式仅在开发构建时不生效，生产构建后可正常工作
• 已尝试移除全局CSS文件排除样式冲突，情况未改变
• 将组件内样式移至全局样式表时可正常生效

组件代码 #

<script>
    export let name;
    export let summonerLevel;
    export let profileIconId;
    export let id;

    $: imgUrl = "http://ddragon.leagueoflegends.com/cdn/13.15.1/img/profileicon/" + profileIconId + ".png"
</script>

<div class="data-user">
    <h2>Summoner Data:</h2>
    <img src={imgUrl} alt="profile icon" />
    <p> Name: {name} </p>
    <p> Level: {summonerLevel} </p>
    <p> Id: {id}</p>
</div>

<style>
    img {
        width: 6rem;
        border: solid .5rem #FFA559;
        border-radius: 50%;
    }

    p {
        color: black;
    }
</style>

效果对比 #

• 使用全局CSS文件时：头像显示为6rem大小，带有橙色边框和圆形圆角，文字为黑色
• 使用组件内<style>标签时：头像无上述样式，文字颜色也未变为黑色

内容的提问来源于stack exchange，提问作者MCK