Приветствую. Собираю проект с помощью этого конфига сборщика:
https://tocode.ru/curses/nastroika-webpack4 . Для удобства адаптивной верстки написал scss миксин:
$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;
}
}
}
Соответственно верстая адптив пишу:
header.desktop{
display: block;
@include mq('phone') {
display: none;
}
}
После сборки в стилях все ок,
media прописываются в самом конце, группируются, но почему-то медиа запросы не работают. т.е конкретно из примера в моб.версии селектор header.desktop не скрывается. Почему не могу понять.. помогите разобраться.
Проект со сборщиком лежит на гитхабе:
https://github.com/kiselev-webmaster/pion 
Средний
Простой
