AEM 6.5如何通过HTL将clientlib内Webpack生成的CSS输出到style标签

开发者阿泽

2026-9-27

实现方案

AEM提供原生可灵活开关的内联能力，无需第三方工具或修改全局OSGi配置，可根据AEM版本选择对应方案：

方案1：HTL clientlib原生参数实现（AEM 6.4+ 适用）

Granite官方提供的clientlib HTL模板默认支持inline参数，开启后会直接输出纯CSS内容而非<link>外部引用标签，使用方式如下：

<!-- 引入clientlib模板 -->
<sly data-sly-use.clientlib="/libs/granite/sightly/templates/clientlib.html">
  <style>
    <!-- 传入inline=true参数直接输出CSS内容，context配置避免特殊字符转义 -->
    ${clientlib.css @ categories='template.critical', inline=true, context='unsafe'}
  </style>
</sly>

按需为指定clientlib添加inline=true即可开启内联，移除该参数则恢复为外部引用，开关非常灵活。

方案2：低版本AEM兼容方案（AEM 6.3及更早版本）

如果AEM版本不支持原生inline参数，可通过AEM官方HtmlLibraryManagerAPI实现，仅需添加一个轻量的JS Use类：

新增clientlibContent.js文件存放在项目的工具类路径下，内容如下：

use(function () {
    var categoryList = this.categories.split(",");
    var htmlLibManager = sling.getService(Packages.com.adobe.granite.ui.clientlibs.HtmlLibraryManager);
    var stringWriter = new Packages.java.io.StringWriter();
    // 输出拼接后的CSS内容，第二个参数控制是否开启压缩
    htmlLibManager.writeCss(stringWriter, categoryList, true, false, request, response);
    return {
        cssContent: stringWriter.toString()
    };
});

HTL模板中调用该Use类获取CSS内容：

<sly data-sly-use.criticalCss="${'/apps/your-project/utils/clientlibContent.js' @ categories='template.critical'}">
  <style>
    ${criticalCss.cssContent @ context='unsafe'}
  </style>
</sly>