Question

因为我们可以导入如下样式表：

    let httpresponse = err;

    let response = err.json();

，这将通过仅加载满足<link rel="stylesheet" media="screen and (min-width: 900px)" href="widescreen.css"> <link rel="stylesheet" media="screen and (max-width: 600px)" href="smallscreen.css">属性条件的css文件来帮助更快地加载网站。MDN

我没有运气来搜索可拆分查询的webpack配置，或者至少让我手动指定了哪个CSS条目应该加载到哪种媒体上。

我唯一的解决方案是在构建时编写nodejs脚本并注入media，但我认为这不是一种干净的方法。

那么这种东西有webpack配置吗？

Answer 1

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

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

您是否曾经考虑过从CSS中提取媒体查询，以便移动用户不必加载桌面特定的CSS？如果是这样，则您需要此插件！

Answer 2

如果不进行动态导入，那么您将只能使用Webpack在编译时作为静态模块捆绑程序可以执行的操作。因为您希望获得的行为在运行时是必需的，所以Webpack只能推断您已经告诉过的有关环境的信息。

话虽如此，您可以创建分别针对特定平台配置的URLResourceValues。假设代码库中唯一的不同是CSS，则在每个构建配置中，除了输出CSS之外的所有内容都应该相同。遵循此路由意味着设置多个路由，每种媒体类型对应一个路由，并根据该配置提供文件。

这肯定比沿着动态导入路径进行的工作还多，但这是可行的，并且可以按媒体类型完全隔离您的应用程序。

Answer 3

我认为这里有些误解。

请注意，webpack作为一种服务器技术，并不知道请求资源的设备的大小和尺寸之类的信息。这是因为这些是客户端功能。这就是为什么当我们编写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是一个开发服务器，不适合在生产环境中使用，因此对加载资产之类的支持并不总是相同的。但是，如果愿意，可以使用webpack轻松获得与上述html相同的结果。您只需要将媒体查询放入一个（或多个）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声明查询的结果相同。

也就是说，如果您的目标是真正限制DOM加载的CSS数量。由于您使用的是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;
  }
`;

希望这种解释至少会有所帮助。祝你好运^ _ ^

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

3 个答案: