AEM 6.5：是否有一种 HTL 方法可以在 AEM clientlib 类别的 <style> 标签内输出 Webpack 生成的 CSS？答案

【问题标题】：AEM 6.5: Is there an HTL way to output Webpack-generated CSS within <style> tags from an AEM clientlib category?AEM 6.5：是否有一种 HTL 方法可以在 AEM clientlib 类别的 <style> 标签内输出 Webpack 生成的 CSS？
【发布时间】：2021-11-02 00:30:02
【问题描述】：

目标： 我有一个准备好“关键 CSS”的特定 clientlib，我想将其添加到 <style> 标签中的页面模板中，每个 Google's performance recommendations 在高流量电子商务网站上。

问题： 我们都知道如何在 HTL 中添加文件引用：

<sly data-sly-use.clientlib="/libs/granite/sightly/templates/clientlib.html" data-sly-call="${clientlib.css @ categories='template.noncritical'}"/>

但是如何通过 HTL 在页面上输出普通生成的 CSS 样式？我可以使用其他一些 HTL 属性吗？我想要这个：

<style>
  /* contents of AEM clientlib CSS here */
</style>

试过了： 我在 Google 上搜索过 StackOverflow，并查看了 AEM docs about clientlibs，但没有找到任何关于内联样式的信息，除了

使用第三方脚本内联关键 CSS。（不想做）
修改 HTML 库管理器 OSGi 配置以默认内联所有样式（不想这样做）

我正在寻找可以在 HTL 中“打开”或“关闭”的 AEM 原生功能。感谢您阅读并提供您可能拥有的任何解决方案。

【问题讨论】：

AFAIK 没有 OOB 方法可以做到这一点。如果你生成的 webpack 在一个文件中，你就不能使用 HTL 内联嵌入文件的内容。您不需要第 3 方脚本来执行此操作，但您需要实现 Sling 模型或 WCM 使用脚本，该脚本将读取文件内容并通过字段/变量将其公开，然后可用于嵌入它到页面上。但是，您可能必须使用 unsafe 上下文才能使其正常工作，如果您无法完全控制文件，则可能会暴露安全问题。

标签： css webpack aem inline-styles client-library

【解决方案1】：

你可以试试https://github.com/dmantsevich/aem-critical-css

它将生成 CSS 文件并与 AEM“集成”。您可以使用它来提取小组件 CSS。一些特点：

只有组件出现在页面上时才会加载 CSS
支持 2 种注入类型：<style /> 和 <link />
支持less、css、scss。
CSS 只会被注入一次

示例：

MyComponentTemplate.html

<sly data-sly-use.aemCriticalCSS="${'./_aem-critical-css.js'}"
@aem-critical-css="my-component/my-component.scss">${aemCriticalCSS.inject @ context="unsafe"}</sly>

其中 my-component/my-component.scss 是 css 的路径（与 ui.frontend/src/ 文件夹相关）。我们在几个项目中使用了它，它有助于提高渲染性能。（路径可配置）

【讨论】：