Vue JS Media Query не работает, он не перезаписывает базу css, даже если он находится в правильной иерархии

Question

По какой-то причине S CSS не работает так, как это должно работать, у меня все стили в правильной иерархии, у меня основа CSS сверху и их медиа-запросы внизу, но по какой-то причине я нужно написать -! Важно в конце всех свойств, которые я перезаписываю, иначе это не сработает.

Стили:

    /* ***********Registration************** */

.register {
  text-align: center;
  .register_choices-wrapper {
    display: flex;
    justify-content: center;
    .register_choices {
      width: 50%;
      display: flex;
      p,
      input,
      form {
        display: inline;
      }
      form {
        display: flex;
        justify-content: space-between;
        width: 80%;
      }
      input:hover {
        cursor: pointer;
      }
      label {
        margin-left: 6px;
      }
    }
  }
  .register_inputs {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    align-items: center;
    input {
      width: 50%;
      margin-top: 10px;
    }
    .formButton {
      width: 50%;
      margin-top: 10px;
    }
  }
}

/* ******************************** */

Медиа-запросы:

    @media screen and (max-width: 768px) {
  .register_choices {
    width: 50%;
    display: block;
    p {
      text-align: left;
    }
    form {
      flex-wrap: wrap;

      width: 100%;
      div:nth-child(1) {
        margin-left: 0;
      }
    }
  }
}
@media screen and (max-width: 600px) {
  .register_choices form {
    display: block;
  }
  form input {
    width: 70%;
  }
}
@media screen and (max-width: 510px) {
  form input {
    width: 90%;
  }
}

И index.s css, чтобы вы могли видеть правильную иерархию

@import "colors";
@import "fonts";
@import "fontSizes";
@import "classes";
@import "animations";
@import "styles";
@import "mediaq";

Медиа-запросы импортируются последними.

Answer 1

S CSS не работает так, как должно работать

Попробуйте "глубоко" > в вашем <style scoped> или ::v-deep комбинаторе?

Vue добавляет data attr с уникальным значением ко всем тегам в вашем компоненте, а затем молча изменяет ваши селекторы CSS / SASS, чтобы полагаться на этот атрибут данных.

Vue. js 2: стиль Scoped не работает с sass / s css