vite - v-bind:class 在构建和刷新后不起作用

Question

我设置了一个 v-bind:class 像这样：

<template>
  <div
    :class="[loading ? 'loading' : 'noloading']"
    class="p-3 text-center shadow rounded bg-white w-full absolute top-14/12 left-0 z-10 dark:bg-gray-800"
    v-text="searchSuccess ? t('common.autoComplete.loading') : t('common.autoComplete.loadingFailed')"
  ></div>
</template>
<style lang="postcss" scoped>
.loading {
  @apply visible;
}
.noloading {
  @apply max-h-0;
  @apply invisible;
}
</style>

如果加载为假，它将被隐藏，并且在开发环境中可以正常工作。当我在我的服务器上构建和部署它时，它也可以正常工作。

但是，当我刷新页面时，css 效果消失了。如图所示，显示了类noloading，但控制台中的样式选项卡无法捕获 css 代码。

在此处输入图像描述

在此处输入图像描述

奇怪的是，这种情况并没有在开发环境中显示出来。它仅在我构建代码并刷新服务器上的页面后出现。

为什么会发生这种情况，我该如何解决？