Vuetify CSS для кнопок загружается в другом порядке при рабочей сборке, вызывая проблему

#javascript #vue.js #webpack #vuejs2 #vuetify.js

Вопрос:

В моем приложении 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>

На моем тестовом сервере локального узла он отображается правильно:

Но когда я создаю сборку с vue-cli-service build помощью и развертываю ее на своем сервере контроля качества, это выглядит неправильно:

Копаясь в инструментах разработчика, я вижу, что это происходит потому, что правило CSS, которое устанавливает высоту каждой ссылки кнопки на «наследование», загружается ПОСЛЕ правила CSS, которое устанавливает его на 36 пикселей, что вызывает проблему. Для CSS должно быть установлено значение «наследование», чтобы CSS выглядел правильно.

Правильный порядок:

Неправильный порядок:

Итак, мой вопрос в том, почему это происходит? Это ошибка в Vuetify? Может быть, ошибка в том, как были упакованы файлы CSS? Это приложение, созданное с помощью vue-cli. Я новичок в этом, поэтому я не уверен, с чего даже начать его отладку.

Любая помощь или рекомендации приветствуются. Спасибо!

1. AFAIK, это vue-loader проблема, и она очень старая, см. github.com/vuejs/vue-loader/issues/808 . Кажется, единственное решение — не полагаться на порядок.

2. Как это исправить? та же проблема с нижней навигацией

Ответ №1:

Я исправляю

 @import 'node_modules/vuetify/src/styles/styles.sass';

для запуска в глобальном проекте