без изменения стиля без "! важный" в медиа-запросах

Question

Ошибка с кодом s css, не может стилизовать что-либо в медиа-запросах без "! Important". Что может быть не так, и также каждый раз, когда я сохраняю любой файл s css, кроме main.s css, это вызывает ошибку, но когда я сохраняю файл main.s css, он работает нормально. Какие-либо предложения? Я использую веб-пакет.

 .loading {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;

    .logo {
        width: 80%;
    }
}

@media screen and (min-width: 8em) and (orientation: landscape) {
    .logo {
        width: 60% !important;
    }
}

@media screen and (min-width: 767px) {
    .logo {
        width: 40% !important;
    }
}

@media screen and (min-width: 1200px) {
    .logo {
        width: 20% !important;
    }
}

Answer 1

Кажется, проблема в том, что вы используете .lo go внутри .loading

попытайтесь сделать это так

.loading {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}
.logo {
    width: 80%;
}

Таким образом, вы сможете использовать медиазапросы без !important.

Вложенный способ имеет более высокую сложность, чем медиазапрос, поэтому вам пришлось использовать !important.