Expand my Community achievements bar.

Adobe Summit 2025: AEM Session Recordings Are Live! Missed a session or want to revisit your favorites? Watch the latest recordings now.

Mark Solution

This conversation has been locked due to inactivity. Please create a new post.

SOLVED

how the js and css files are mapped to a component from ui.frontend?

Avatar

Level 6

how the js and css files are mapped to a component from ui.frontend?

1 Accepted Solution

Avatar

Correct answer by
Employee

There is no mapping is required. Using ClientLibs categories adding the JS and CSS under /apps/<project>/cleintlibs. And then while writing the css use a parent class name like cmp-<component_name> that work as prefix with all css and JS(ref screenshot 1 below). 

Then in component html use the same prefix classname with all your classes. Like below screenshot 2.

screenshot 1:

MRashidRaza_1-1683697085329.png

 

screenshot 2:

MRashidRaza_0-1683696991477.png

 

 

View solution in original post

5 Replies

Avatar

Community Advisor

Hi Sravanan,

 

I went through the documentation it's there about adding clientlibs to the template but for a specific component how to add css / js from ui.frontend.

 

Is it based on the name of the css and js files with component's name?

Avatar

Correct answer by
Employee

There is no mapping is required. Using ClientLibs categories adding the JS and CSS under /apps/<project>/cleintlibs. And then while writing the css use a parent class name like cmp-<component_name> that work as prefix with all css and JS(ref screenshot 1 below). 

Then in component html use the same prefix classname with all your classes. Like below screenshot 2.

screenshot 1:

MRashidRaza_1-1683697085329.png

 

screenshot 2:

MRashidRaza_0-1683696991477.png

 

 

Avatar

Level 6

no from ui.frontend not from ui.apps.

Avatar

Employee

I answered from ui.frontend only. Read carefully and browse the project.