How to split media queries under webpack config?

user_2823226 0
Viewed 4888

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?

code-splitting webpack reactjs javascript
2 Answers

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!

user_8341140

Without doing dynamic imports you're limited to what Webpack can do as a static module bundler at compile time. Because the behavior you're looking to get is required at runtime, Webpack cannot infer anything but what you have already told it about the environment.

Having said that, you can create multiple build outputs that are each configured for a particular platform. Assuming the only difference in your code base is your CSS, everything but your output CSS should be identical across each build configuration. Going this route means setting up multiple routes, one for each media type, and serving the files from that configuration.

It's definitely more work than going down the dynamic imports path, but it's doable and completely segregates your application by media type.

user_42820810
Related