Responsive layout scss mixin not working in webpack?

Question

Sass

Greetings. I build the project using this builder config: https://tocode.ru/curses/nastroika-webpack4 . For the convenience of adaptive layout, I wrote scss mixin:

$breakpoints: (
    "phone":        400px,
    "phone-wide":   480px,
    "phablet":      560px,
    "tablet-small": 640px,
    "tablet":       768px,
    "tablet-wide":  1024px,
    "desktop":      1248px,
    "desktop-wide": 1440px
);
@mixin mq($width, $type: max) {
    @if map_has_key($breakpoints, $width) {
        $width: map_get($breakpoints, $width);
        @if $type == max {
            $width: $width - 1px;
        }
        @media (#{$type}-width: $width) {
            @content;
        }
    }
}

Accordingly, when typesetting the adaptive, I write:

header.desktop{
    display: block;
    @include mq('phone') {
        display: none;  
    }
}

After assembling in styles, everything is OK, media are written at the very end, grouped, but for some reason media queries do not work. i.e. specifically from the example in the mobile version, the header.desktop selector is not hidden. Why I can not understand .. help me figure it out.

The project with the assembler is on github: https://github.com/kiselev-webmaster/pion

Answer 1

Of course it doesn't work, where is the meta viewport?

<meta name="viewport" content="width=device-width, initial-scale=1.0">