Vuetify CSS for buttons loads in different order on production build, causing issue

In my Vue app, I have a Vuetify "bottom navigation" component as such:

    <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>

In my local node test server, it displays correctly:

But when I create a build with vue-cli-service build and deploy it to my QA server, it looks wrong:

Digging into the developer tools, I can see this is happening because the CSS rule that sets the height of each button link to "inherit" is being loaded AFTER the CSS rule that sets it to 36px high, which is causing the problem. It needs to be set to 'inherit' for the CSS to look correct.

Correct order:

Incorrect order:

So my question is, why is this happening? Is this a bug in Vuetify? Maybe a bug in how the CSS files were packaged? This is an app built with vue-cli. I'm new to it, so I'm not sure where to even begin to debug it.

Any help or guidance appreciated. Thanks!