CSS for Experience Fragments Not Applying in AEM Author Mode and "View as Published"

[SRC_AEM_DEV]

Hello Adobe Community,

I’m encountering an issue in Adobe Experience Manager as a Cloud Service (AEMaaCS) where CSS is not applying to my Experience Fragments (XFs) authoring environment or in the "View as Published" mode. However, when I add the Experience Fragment to a page and check, the CSS loads correctly.

How to apply the CSS directly to XF alone?

Any insights or solutions would be greatly appreciated!

@arunpatidar 

[Anil_Chennapragada]

hi @SRC_AEM_DEV ,

My thoughts here based on the understanding, There are multiple ways to achieve this, providing a sample example below

• How did you include the component CSS (assuming via client libraries)? If it is included along with all the other components in the page level (e.g. customheader.html), the css would render only on the pages which is using that page resource type.
• Create the custom XF page template by including the respective client libraries respectively and use that xf template to create XF so that the component specific css will be rendered on the XF as well. 

Thanks,

Anil

[daniel-strmecki]

Hi @SRC_AEM_DEV,

can you share your code so we can see how you inject the CSS? Are you using a ClientLib?

Daniel

[h_kataria]

You can simply include the required clientlib in your exp fragment template. 
You can take reference https://github.com/adobe/aem-guides-wknd/blob/main/ui.apps/src/main/content/jcr_root/apps/wknd/compo... 

[arunpatidar · Accepted solution]

Hi @SRC_AEM_DEV ,
XF does not load project client libs by default, you need to specify in the XF page to load your project clientlibs.

If you are using dynamic/editable template then you can use policy to load clientlibs

Example

<!-- Template Policy -->
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0" jcr:primaryType="cq:Page">
    <jcr:content 
        cq:policy="myapp/components/structure/xf-page/policy_xf_page" 
        jcr:primaryType="nt:unstructured" 
        sling:resourceType="wcm/core/components/policies/mappings">
        <root 
            cq:policy="wcm/foundation/components/responsivegrid/policy_xf_allow_comp" 
            jcr:primaryType="nt:unstructured" 
            sling:resourceType="wcm/core/components/policies/mapping" />
    </jcr:content>
</jcr:root>

<!-- Policy -->
<xf-page 
    jcr:primaryType="nt:unstructured">
    <policy_xf_page 
        jcr:primaryType="nt:unstructured" 
        jcr:title="XF Page Policy" 
        sling:resourceType="wcm/core/components/policy/policy" 
        clientlibs="[myapps.main]" />
</xf-page>