SvelteKit构建静态站点后Scoped CSS未生效的诡异问题

这是我遇到过的最诡异的Bug之一。使用npm run dev运行代码时一切正常，但构建为静态站点后出现异常：我希望点击元素后其颜色变为绿色，但实际点击时其他元素的颜色并未更新。代码逻辑在开发模式下完全正常。

相关截图 #

• 开发模式正常效果1：
• 开发模式正常效果2：
• 预期效果：
• 构建后实际效果：

项目配置 #

import adapter from '@sveltejs/adapter-static';
import { vitePreprocess } from '@sveltejs/kit/vite';

/** @type {import('@sveltejs/kit').Config} */
const config = {

    preprocess: vitePreprocess(),

    kit: {
        adapter: adapter({
            pages: 'build',
            assets: 'build',
            fallback: null,
            precompress: false,
            strict: true
        })
    }
};

export default config;

诡异的临时修复 #

发现一个奇怪的现象：添加如下空CSS块后，问题完全解决：

button {
}

实在太诡异了...

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