NextJS 中基于窗口宽度的单独 CSS 链接

Question

是否可以根据媒体查询制作 NextJS 链接样式表？我正在使用 css 模块。示例：

CSS模块文件：

@media(max-width: 800px) {
  .myClass{
    /* ...mobile styles */
  }
}
@media(min-width: 800px) {
  .myClass{
    /* ...desktopstyles */
  }
}
.myClass {
  /* all media styles */
}

NextJS 如何创建链接：

<link rel="stylesheet" href="/_next/static/css/<bundle-number>.css">

期望的行为：

<link rel="stylesheet" href="/_next/static/css/<bundle-number-desktop>.css" media="(min-width: 800px)">
<link rel="stylesheet" href="/_next/static/css/<bundle-number-mobile>.css" media="(max-width: 800px)">
<link rel="stylesheet" href="/_next/static/css/<bundle-number-all-medias>.css" data-n-p="">

我在研究中找不到任何解决方案。

Answer 1

快速回答是，是的，但实际上不是。
如果您希望代码自动拆分并由 Next.js 处理，我认为现在不可能（或者除非您调整自定义服务器方法）。

但是对于您的解决方法，只需添加包含美好时光的 CSS 文件即可？

<link rel="stylesheet" type="text/css" href="style.css" your-property-goes-here>

我想你可以把这个通过

_document.{tsx|jsx}

。
您的特定情况的缺点是，您提到您正在使用 CSS 模块，对吗？恐怕您可能应该坚持使用经典的类/类名。