Я думаю, здесь есть небольшое недоразумение.
Обратите внимание, что веб-пакет, как серверная технология, не знает таких вещей, как размер и размеры устройства, запрашивающего ресурс.Это потому, что это функции на стороне клиента.Вот почему, когда мы пишем HTML, мы запрашиваем и загружаем все ресурсы одновременно, например:
<link rel="stylesheet" media="screen and (min-width: 900px)" href="widescreen.css">
<link rel="stylesheet" media="screen and (max-width: 600px)" href="smallscreen.css">
Я подозреваю, что ваша цель состоит в том, чтобы не загружать слишком много ненужных таблиц стилей на клиенте, нообратите внимание, что приведенный выше HTML этого не делает.Вы фактически загружаете их все, но медиа-запрос будет записывать только те листы, которые влияют на размеры вашего устройства.
Webpack - это сервер разработки, который не предназначен для использования в производственной среде, поэтому нетt всегда одинаковая поддержка таких вещей, как загрузка ресурсов.Однако, если вы хотите, вы можете легко достичь того же результата, что и вышеупомянутый html, используя webpack.Вам просто нужно поместить ваши медиа-запросы в сам файл (или файлы) CSS.
Например, внутри widescreen.css:
@media screen and (min-width: 900px) {
body {
background-color: blue;
}
}
Тогда внутри smallscreen.css:
@media screen and (max-width: 600px) {
body {
background-color: red;
}
}
Это не будет функционально другим и будет иметь такие же результаты, какобъявление запроса из HTML, а не из CSS.
Тем не менее, если ваша цель действительно ограничить количество CSS, загружаемых DOM.Поскольку вы используете React, вы, безусловно, можете это сделать, но просто знайте, что представленный вами HTML определенно не делал этого.Чтобы загрузить только соответствующую таблицу стилей в шаблон React для каждого отдельного компонента, вам необходимо получить размеры клиентского устройства и загрузить правильную таблицу стилей для компонента.Процесс для этого немного сложен, но вы можете прочитать одно примерное объяснение в этом сообщении в блоге: https://medium.com/type-faster/js-media-queries-md-a18b41a9a28e.
Или, для менее сложного подхода, вы можете просто встроить свои медиа-запросы напрямуюв самом вашем компоненте.Например:
const CardWrapper = styled.div`
display: flex;
flex-direction: row;
@media (max-width: 600px) {
flex-direction: column;
}
`;
Надеюсь, что объяснение поможет хоть немного.Удачи ^ _ ^