Global Styles in AEM Custom Common Component Library

Question

Hello,

I'm trying to look for a solution where we want to define CSS, and JS that's common across the app. Here's the architecture of our application.

We are a multi-tenant app and have different teams developing their own AEM apps but we have quite a few components that are common across the applications and we are building a common library of components that can be reused in tenant applications.

The way we have built the commons library is just using the below modules:

<module>all</module>

<module>core</module>

<module>ui.apps</module>

<module>ui.config</module>

<module>it.tests</module>

Since we have multiple components to be developed in the commons library, we are in a situation where we need CSS variables, Mixins, etc to reuse. What's the best place/way to include these global/common styles for this library without needing to have a ui.frontend module?

Requesting help on this. Thanks in advance

Sady_Rifat · Accepted Answer

Hello @manasabojja7 ,You can use the most optimal solution for the common components, and add the clientlibs with HTL file. For example, you have a separator component and this component CSS will be common. Separator HTL: ${clientlibs.cssIncludes @ context="unsafe"}

Check this documentation on how component clientlib can be added independently once at a time. https://experienceleague.adobe.com/docs/experience-manager-core-components/using/developing/including-clientlibs.html?lang=en You can also check the benefits of common clientlib and component-wise clientlib: https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/clientlibs/m-p/586477 Since the common components are very few you can use this approach.However, if you have any restrictions to using this architecture, you can embed all the clientlibs under a common clientlib. Let's say site-common location my-project/clientlibs/site-common

ManviSharma · Answer

Hi,

To include global/common styles for a multi-tenant app with a common library of components, you can define CSS variables and mixins in a separate CSS file within the common library and reference it in the individual component CSS files. Alternatively, you can use a preprocessor like Sass or Less to define the variables and mixins in a single file and include it in the component stylesheets. This will allow for easy reuse of common styles across components.

Sign up

Login with SSO

Login to the community

Login with SSO

Scanning file for viruses.

This file cannot be downloaded