Почему Медиа Запросы не работают в Angular8

Question

Я запускаю приложение angular на CLI версии 8. В прошлый раз все работало нормально, когда я проверял свой код на github и собирал для производства. Но теперь, когда я пытаюсь запустить его на локальном хосте, кажется, проблема. Файлы HTML не принимают медиазапросы из файлов CSS. Когда я пишу CSS из медиазапросов, все работает нормально, но внутри медиазапросов это не работает.

Также, когда я пытаюсь проверить chrome, классы прикрепляются к тегам HTML, но CSS не будет отображаться. Я не знаю, где я сделал ошибку. Я предполагаю, что из-за какой-то сборки произошла ошибка, из-за какого-то пакета npm или, возможно, по какой-то другой причине.

Используются следующие медиазапросы:

/* mobiles (landscape and portrait) */
@media only screen and (min-width: 320px) and (max-width: 500px) {}


/* iPads (portrait and landscape) ----------- */
@media only screen and (min-width: 550px) and (max-width: 800px) {}


/* Desktops and laptops ----------- */
@media only screen and (min-width: 850px) and (max-width: 1024px) {}

/* bigger laptops */
@media only screen and (min-width: 1224px) { }

Пожалуйста, помогите мне выйти из этой ситуации. Заранее спасибо.

Answer 1

Спасибо за помощь!

Кажется, в пакете npm, который я использовал, есть какая-то ошибка. Убрал пакет и все работает нормально, как и ожидалось. Пакет npm, который я использовал, был ngx-swiper-wrapper.

Answer 2

Медиа-запросы должны быть в конце вашего css файла, потому что css читается сверху вниз. Правило, которое установлено последним, будет выполнено

/* bigger laptops */
@media only screen and (min-width: 1224px) { }
/* Desktops and laptops ----------- */
@media only screen and (min-width: 850px) and (max-width: 1024px) {}
/* iPads (portrait and landscape) ----------- */
@media only screen and (min-width: 550px) and (max-width: 800px) {}
/* mobiles (landscape and portrait) */
@media only screen and (min-width: 320px) and (max-width: 500px) {}