gpt4 book ai didi

css - 在 Next.js 10 中打印样式表

转载 作者:行者123 更新时间:2023-12-05 06:47:22 24 4
gpt4 key购买 nike

在我的 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> 的方式。标记已呈现。

我能看到这可能 工作的唯一方法是有一个匹配 print.css 的 Webpack/文件加载器配置的自定义位。只是,感觉……不太理想。

最佳答案

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

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

这确实会降低加载队列中的优先级,防止渲染被阻塞并最终由网络字体替换原生字体。

更新:不理想,但对于我的 “简单” CSS 文件(仅定义 font-face),这是我所做的:

  1. 移动我的webfonts.css文件到公用文件夹
  2. 手动添加我的<link>里面<Head>

关于css - 在 Next.js 10 中打印样式表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/67132066/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com