A Step-by-Step Guide to Adding Clientlibs to AEM Components and Working with SCSS | Adobe AEM

 Adobe Experience Manager (AEM) offers robust tools for developers to create highly customizable components. In this guide, we’ll show you how to add client libraries (clientlibs) to specific components in AEM and seamlessly integrate SCSS for styling. Let’s break it down step by step.

A Step-by-Step Guide to Adding
 Clientlibs to AEM Components and Working with SCSS

Structure of Component

How to Create a Component in AEM

Creating a component is the first step in building customized functionality in AEM. Here’s how you do it:

1. Navigate to the desired folder where you want to create the component.
2. Click on "Create" and select "Create Component from Dialog" from the dropdown menu.
3. Fill in the details, such as:
   
   
   
   
   
   
4. Click Next, and your component will be created.
5. Rename the generated .jsp file to .html to use the HTL format for modern templating.
   
   
   
   
   
6. Add a cq:dialog node for configuration:
   Click Create > Create Node, or
   Copy and paste the cq:dialog from an existing core component.
7. Drag and drop your new component onto the page, and its contents will render.

How to Add Clientlibs to Specific Components in AEM

Client libraries are essential for adding styles and scripts to your AEM components. Follow these steps to create and link clientlibs:

1. Create the Clientlibs Folder

1. Navigate to the component node in CRXDE Lite.
2. Click on "Create" and select "Create Node".
3. Name the node (e.g., clientlibs) and set its type to cq:ClientLibraryFolder.

2. Add Folders for CSS and JavaScript

1. Inside the clientlibs folder:
   Create a folder named css and place all your CSS files inside.
   Create a folder named js and place all your JavaScript files inside.
2. Add two files:
   css.txt: Import your CSS files (e.g., style.css).
   js.txt: Import your JS files (e.g., script.js).

3. Configure the Clientlibs Properties

1. Select the clientlibs folder and add the following properties:
   categories: Assign a unique category name (e.g., mycomponent.styles).
   allowProxy: Set this to true for accessibility.

4. Include Clientlibs in Your HTML File

To link the clientlibs in your component, add the following code to your .html file:



code:

<sly data-sly-use.clientlib="/libs/granite/sightly/templates/clientlib.html">

    <sly data-sly-call="${clientlib.css @ categories='testScssClientlibs' }" />

</sly>

<h1 class="myClass">Test Scss Component is working</h1>

<sly data-sly-use.clientlib="/libs/granite/sightly/templates/clientlib.html">

   

    <sly data-sly-call="${clientlib.js @ categories='testScssClientlibs'}" />

</sly>

5. Verify Your Work

Reload your AEM page, and you should see your CSS and JS files successfully applied to the component.

How to Load Static Resources in a Component

To load static resources like images in AEM components, follow these steps:

1. Create a folder named resources within your clientlibs directory.
2. Place your images inside the resources folder.
3. Use the path "/apps/emoney/components/site-components/TestScssCompo/test-scss-compo/clientlibs/resources/images/img1.png" to reference the image.
4. This path can be used in both HTML and CSS files to load the image.

How to Use SCSS with AEM Components

For advanced styling, SCSS provides a cleaner and more maintainable approach compared to plain CSS. Here’s how to integrate SCSS into your AEM components.

1. Set Up Your Environment

1. Install the VS Code AEM Sync extension for easy code management.

2. Import your component from the AEM server:
   - Right-click the parent folder in VS Code.
   - Select "Import from Server".
   
   

3. Install Sass globally using the following command:

   bash : npm install -g sass

2. Create and Compile SCSS

1. Navigate to the css folder of your component.

2. Create a new file named style.scss.

3. Write your SCSS code and compile it to CSS with the following command:

   
   command : sass style.scss style.css
   

4. The SCSS code will be converted to a style.css file, which is already linked to the component via clientlibs.

3. Export to AEM

After making changes, export the component back to AEM:

1. Right-click your component in VS Code and select "Export to Server".
2. Refresh the AEM page to see the updated styles.

Common Issues and Troubleshooting

Why Are My Clientlibs Not Loading?

• Ensure that the allowProxy property is set to true.
• Check that the categories name matches in both the clientlibs folder and your .html file.

How Can I Debug SCSS?

• Use browser developer tools to inspect styles and ensure your compiled CSS is properly linked in css.txt.

Conclusion

This comprehensive guide covers everything you need to know about adding clientlibs to specific AEM components and integrating SCSS. By following these steps, you can build scalable, modular, and visually appealing components with ease.

If you found this guide helpful, don’t forget to share it with your peers. For more AEM tutorials and tips, bookmark this blog and stay updated!