Javascript Vuetify CSS按钮在生产构建中以不同的顺序加载，导致问题

在我的Vue应用程序中，我有一个Vuetify“底部导航”组件，如下所示：

    <v-bottom-navigation
        app
        fixed
        grow
        color="#121212"
        class="bottom-navigation"
    >
        <v-btn text tile v-for="menuItem in menuItems()" :key="menuItem.name" :to="{ name: menuItem.name }" exact>
            <span>{{ menuItem.title }}</span>
            <v-icon>mdi-{{ menuItem.icon }}</v-icon>
        </v-btn>
    </v-bottom-navigation>

{{menuItem.title}
mdi-{menuItem.icon}

在我的本地节点测试服务器中，它正确显示：

但是，当我使用

vue cli service build

创建一个构建并将其部署到QA服务器时，它看起来是错误的：

深入研究开发人员工具，我可以看到这种情况的发生，因为将每个按钮链接的高度设置为“继承”的CSS规则是在将其设置为36px高的CSS规则之后加载的，这导致了问题。它需要设置为“继承”，CSS才能看起来正确

正确的顺序：

顺序不正确：

所以我的问题是，为什么会发生这种情况？这是Vuetify中的一个bug吗？可能是CSS文件打包的错误？这是一个使用vue cli构建的应用程序。我对它还不熟悉，所以我甚至不知道从哪里开始调试它

---

感谢您的帮助或指导。谢谢

AFAIK这是

vue加载程序

的问题，非常旧，请参见。似乎唯一的解决方案是不依赖订单。AFAIK这是

vue loader

问题，而且它非常旧，请参见。看来唯一的解决办法就是不要依赖秩序。