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

есть папка blocks. в ней файл _media.scss, импортирую его через @import в главный style.scss который компилиться и переводиться в style.min.css, а тот уже и подключен к html.

описание проблемы:

стили прописанные в медиа-запросах не перекрывают базовые. медеа-запросы даже не отображаются в инспекторе

• ошибся в путях? нет
• вьюпорт прописан
• названия везде одинаковые
• тем более, предыдущие импорты сасс файлов работают
• галп на компиляцию не ругается

в предыдущих проектах всё было так же, но такой проблемы не возникало.

upd:

прописал все эти медиа-запросы не в отдельном файле, а прямо в style. точно так же, ничего в инспекторе кода нету. подумал что перестали работать все файлы, но background: red; сработал.

из последнего в setting.json:

"workbench.preferredDarkColorTheme": "Webstorm IntelliJ Darcula Theme",
"workbench.preferredHighContrastColorTheme": "Brogrammer",
"workbench.iconTheme": "helium-icon-theme",
"terminal.integrated.fontFamily": "JetBrains Mono",
"editor.fontFamily": "JetBrains Mono",
"editor.fontSize": 13,
"editor.renderWhitespace": "boundary",
"editor.wordWrap": "on",
"editor.accessibilitySupport": "off",
"editor.codeLens": false,
"editor.defaultFormatter": "HookyQR.beautify",
 

что мы имеем:

медиа запросы из файла _media.scss который импортирован в style.scss не читает и не показывает вообще в инспекторе.

медиа запросы прописанные напрямую в style.scss тоже не показываются, но при этом background-color: red - работает.

отчистил кеш, перезапустил vscode и браузер и провел еще один тест:

а что если в _media.scss прописать bcolor-red? покажет зачеркнутым в инспекторе из-за иеерархии или тоже не отобразит?

результат:

background-color: red; есть и он зачеркнутый.

вывод: все файлы подключены правильно и всё работает, браузер не видит конкретно строчек с медиа-запросами.

как быть, ума не приложу..

стили отформатированы бьютифаем:

 @media (max-with : 1200px) {
    .container {
        max-width: 960px;
    }
 
 
@media (max-with: 992px) {
    .container {
        max-width: 720px;
        padding-left: 70px;  // todo: временный пэдинг
    }
 
}
 
 
@media (max-with: 768px) {
    .container {
        max-width: 540px;
    }
}
 
@media (max-with: 576px) {
    .container {
        width: 100%;
        padding: 0 15px;
    }
}

Внимательный человек подсказал что опечатка в width, стоит 'with'. Спасибо за внимание.