在 Next.js 10 中打印样式表

Question

在我的 Next 10 应用程序中，我可以像这样在_app.js中导入全局 styles

import 'assets/css/app.css'

我想添加打印样式表。 我知道我可以使用@media print { }查询app.css ，但理想情况下它将作为单独的文件加载，因此下载优先级较低，例如

<link rel="stylesheet" href="/assets/css/print.css" media="print">

这可能使用 Next.js 吗？ 我看不到任何明显的方法来控制实际<link>标记的呈现方式。

我认为这可能有效的唯一方法是拥有一个仅匹配print.css的自定义 Webpack/file-loader 配置，感觉……不太理想。

Answer 1

我和你 velvetkevorkian 有同样的问题，但打算使用以下技术：

<link rel="stylesheet" href="webfonts.css" media="print" onload="this.media='all'" />

这确实会降低加载队列中的优先级，防止渲染被阻塞，并最终将原生的 fonts 替换为 webfonts。

更新：不理想，但对于我的“简单” CSS 文件（仅定义font-face ），这是我所做的：

Answer 2

有可能，是的！

您可以在文件夹页面或任何地方创建 Print.module.css ，在此文件中您必须使用

@media print {
     /* its an example */
    .noPrint{
      display: none;
    }
}

在您的 file.js 或 .tsx 中，您将其称为 css

import print from './Print.module.css'

并像这样调用类名：

className={print.noPrint}

如果您的项目中有更多样式表，您可以这样区分：

import print from './Print.module.css'
import styles from './General.module.css'

并将这些类一起调用，它是这样的：

className={`${styles.anyclass} ${print.anyclass}`}

这也适用于响应式样式表，足以在相应的媒体查询中遵循此逻辑。