How to split media queries under webpack config?

Question

since we can import style sheets like below :

<link rel="stylesheet" media="screen and (min-width: 900px)" href="widescreen.css">
<link rel="stylesheet" media="screen and (max-width: 600px)" href="smallscreen.css">

and this will help faster loading of web site by loading only a css file which meets media attribute conditions.MDN

I had no luck searching for webpack config that can split queries or at least let me manually specify which css entry should load on which media.

my only solution was to write nodejs script and inject index.html at build time but that's not clean way to do it in my opinion.

so is there any webpack config for this kind of stuff?

Answer 1

This is more like a comment, but I believe there is a plugin for that:

https://github.com/SassNinja/media-query-plugin

Have you ever thought about extracting your media queries from your CSS so a mobile user doesn't have to load desktop specific CSS? If so this plugin is what you need!