Не подключается файл scss?

Question

[Denioo]

Здравствуйте, возникла проблема. Не подключается к файлу другой файл scss в котором находятся медиа запросы, подключаю через:
@import "./media/_media.scss";
Почему так? Миксины подключал так же все без проблем и ошибок работает, а вот медиа запросы не хотят.
Небольшой код для проверки в файле медиа запросов, мб в нем дело:

* {
    box-sizing: border-box;
}

@media (max-width: 1200px){
    .under-nav {
        background-color: #fff;
    }
}

Comments

[Rustam Bainazarov]

Какую ошибку выдаёт?

[Denioo]

Рустам Байназаров, В том то и дело ошибки нет, просто не применяются стили когда в гугл меняю разрешение.

[Denioo]

Рустам Байназаров, хотя знаете смотрю css файл, там все прописано все стили.

[Rustam Bainazarov]

Denioo, тогда ошибка в CSS. Медизапросы должны идти после объявления основных стилей, но этот момент ещё зависит от архитектуры и некоторых особенностей.

Кидайте сюда CSS-файл и скажите, что не применяйте.

[Denioo]

Рустам Байназаров, В конечном css файле выглядит все так:

@charset "UTF-8";
* {
  padding: 0;
  margin: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

@media (max-width: 1200px) {
  .under-nav {
    background-color: #fff;
  }
}

body {
  font-family: "Open Sans", sans-serif;
  color: #656565;
  font-size: 14px;
}

И дальше идут основные стили

[Rustam Bainazarov]

Denioo, неправильно. Они должны быть после основных стилей.

[Denioo]

Рустам Байназаров, Хм... Стоит sass watch, странно почему он ставит в начало тогда.

[Rustam Bainazarov]

Denioo, потому что вы импортируете в начале, наверное; sass watch же просто следит за обновлением файлов.

[Rustam Bainazarov]

Denioo, вот смотрите, как иерархия влияет (блок должен быть зелёным):

Не работает:



А вот так работает:

[Denioo]

Рустам Байназаров, он же еще компилирует scss, sass в css. Сейчас попробовал импортировать в конец, чет не помогло))

[Rustam Bainazarov]

Denioo, компилирует он на основе тех файлов и той иерархии, что вы ему предоставили. Он не следит за вашими ошибками, если они не мешают компиляции.

[Rustam Bainazarov]

Denioo, показывайте полный код тогда, так ничего не понятно.

[Denioo]

Рустам Байназаров, Все спасибо разобрался, проблема оказалось и правда в месте куда я импортирую. Крч. Вставил в тег .header т.к. under-nav в header находится. Вот так заработало.

.header {
@import "./media/_media.scss";
}

[Rustam Bainazarov]

Denioo, ну слава богу, пишу ответ, чтобы закрыть вопрос.

[Rustam Bainazarov]

Denioo, кстати.

Не вот так:

* {
    box-sizing: border-box;
}

А вот так:

*, :before, :after {
    box-sizing: border-box;
}

Селектор * не выбирает псевдоэлементы.

[Denioo]

Рустам Байназаров, Понял, спасибо))

Answer 1

[Rustam Bainazarov]

Это ошибка не SASS, а исключительно CSS из-за того, что вы импортируете медиазапросы до объявления основных стилей, тогда как нужно делать наоборот.