javascript - 如何在 webpack 配置下拆分媒体查询？

Question

因为我们可以像下面这样导入样式表:

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

这将有助于通过仅加载满足 media 属性条件的 css 文件来更快地加载网站。 MDN

我没有找到可以拆分查询的 webpack 配置，或者至少让我手动指定哪个 css 条目应该加载到哪个媒体上。

我唯一的解决方案是编写 nodejs 脚本并在构建时注入(inject) index.html 但在我看来这不是一个干净的方法。

那么有没有针对这种东西的 webpack 配置？

Answer 1

这更像是评论，但我相信有一个插件:

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!