Next.js 10中的打印样式表

Question

4

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

import 'assets/css/app.css'

我想添加一个打印样式表。我知道可以使用@media print { }查询在app.css中，但最好将它作为单独的文件加载，这样下载优先级会更低，例如：

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

这种情况能否在Next.js中实现？我没有找到明显的方法来控制实际的<link>标签如何呈现。

唯一我能想到的可能是使用自定义Webpack/file-loader配置来匹配只有"print.css"的情况，但这感觉不太理想。

- velvetkevorkian

请展示您的JSX代码和NextJS页面渲染函数的其余部分。 - Dai

你应该能够使用 next/Head 并返回一个包含 <link /> 的 <Head> JSX 元素。请参见此处：https://nextjs.org/docs/api-reference/next/head - Dai

当然，但是除了将其放在公共文件夹中之外，是否有通过import获取该样式表的链接的方法？ - velvetkevorkian

如果它不在公共文件夹中，浏览器还能以其他方式下载它吗？ - Dai

我希望它可以通过与其它CSS文件相同的构建过程，获得哈希标识以便于缓存等，并最终出现在 "_next/static/css" 文件夹中，就像其他生成的样式表一样。 - velvetkevorkian

2个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- mass · Answer 1

我和你velvetkevorkian有同样的问题，但是我的意图是使用以下技术：

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

这确实会降低加载队列中的优先级，防止渲染被阻塞，并最终用 Web 字体替换本地字体。

更新：虽然不太理想，但对于我“简单”的 CSS 文件（仅定义了 font-face），我做了以下操作：

- Leffa · Answer 2

是的，这是可能的！

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

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

在你的 .js 或 .tsx 文件中，你可以像这样调用这个 css

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

然后像这样调用className：

className={print.noPrint}

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

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

并且调用这些类，就像这样：

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

这对于响应式样式表也适用，足够遵循这个逻辑和相应的媒体查询。