Реакция scss Медиа-запрос не переводит max-width

Question

У меня проблема с медиа-запросом SCSS в React.

Я использую загрузчик scss

        {
            test: /\.scss$/,
            use: [
                "style-loader", // creates style nodes from JS strings
                "css-loader", // translates CSS into CommonJS
                "sass-loader" // compiles Sass to CSS, using Node Sass by default
            ]
        }

, а в _menu.scss у меня есть

.menu-button {
position: fixed;
right: 2em;
top: 2em;
z-index: 999;
width: 4em;
height: 3em;
background-color: inherit;
border: none;
cursor: pointer;

@media all and (min-width: 728px) {
  background-color: #000000;
}

после этого я вызываю это в base.scss

, но min-width все время работает и не определяет, какую ширину имеет устройство, а max-width вообще не работает.

Может кто-нибудь помочь мне, пожалуйста?Что я делаю не так?

РЕЗУЛЬТАТ: должно быть max-device-width или min-device-width:)

Answer 1

Насколько я вижу, на основе вашего кода ваш медиа-запрос не работает, потому что вы не указали внутри медиа-запроса, какой элемент должен иметь background-color: #000000

Если вы хотите иметь другой фонцвет вашего тела для экрана ниже 480px (например) вы должны сделать что-то вроде этого:

@media all and (min-width: 480px) {
    body {
        background-color: lightgreen;
    }
}