CSS для моего развернутого сайта NuxtJs не работает

Question

Я обнаружил некоторые проблемы, похожие на мои, но ничего достаточно близкого для меня. Я создал блог-сайт с использованием NuxtJs с Vuetify и развернул его на Netlify. Сайт выглядит и работает отлично по большей части. У моего сайта есть навигационный ящик, который должен иметь цвет фона # 659dbd. Этот цвет обнаруживается в разработке. Однако на развернутом сайте цвет фона - белый. Когда я проверяю сайт в моих инструментах разработки, этот цвет отображается в стилях, но он проходит через него, например:

Кто-нибудь имеет какие-либо идеи, что может быть причиной этого?

Я посмотрел на ошибки Netlify, но ничего такого не мог сказать.

Это странно, потому что все мои другиестили отображаются хорошо.

Если я что-то пропустил или если вам нужен какой-либо код, дайте мне знать.

Answer 1

Это происходит потому, что вы, вероятно, используете модуль nuxt / vuetify, и для разработки он использует встроенный пакет vuetify, но для производства он использует версию treehake. А с treehaken-версией vuetify он динамически загружает CSS на страницу. Поэтому сначала загрузите свой стиль страницы, затем adn vuetify загрузите свои собственные стили компонентов, и он переопределит ваши собственные стили

Answer 2

Возможно, есть еще одно более конкретное правило.

<div class="list">
  <div class="drawer"> Item </div>
</div>


<style>
 .list {
  background-color: #4589e0;
 }
 .drawer {
  background-color: #1707a3;
 }
 .list .drawer {
  background-color: #a3073b;
 }
</style>

Подробнее об этом здесь: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity