How to Style Components in AEM, css is not getting co...

[Heena91]

Hi All,

I have created Maven Project, When I try to add styles to the components I was not able to see the styles on the components, css is not even getting compiled. 

Please Advise what is the correct structure to follow for ClientLib in AEM and how to apply these clientLib/styles to the components. 

Thanks

Heena

[Asutosh_Jena_ · Accepted solution]

Hi @Heena91 

Please see the structure below:

This is how the index.less will look like:

@import 'variables/index.less';
@import 'mixins/index.less';

@import 'base/index.less';
@import 'structure/index.less';
@import 'vendor/bootstrap.less';
@import 'components/index.less';

css.txt will have the index entry only.

#base=styles
index.less

 We need to ensure the clientlib category is loading on the page.

Thanks!

[Heena91]

Hi @Asutosh_Jena_

Thanks for the response.

Could you please help below quesries:

1. How to ensure the clientlib category is loading on the page?

2. How to connect/apply clientlib with the component? (just by calling the class name mentioned in less from HTML page or anything else is also required)

Thanks

Heena

[Asutosh_Jena_]

Hi @Heena91 

You can add "debugClientLibs=true" to your URL and check in the browser console. All the less/css files that are embedded will be loading separetly (page might be breaking).

http://localhost:4502/content/wknd/language-masters/en/magazine.html?wcmmode=disabled&debugClientLib...

Also you can check in the page view source (head section), the css file will be loaded (something like below for wknd). When you open the file it will show all the code embedded into it.

http://localhost:4502/etc.clientlibs/wknd/clientlibs/clientlib-base.css 

Here also you can see what all files are loading from which category in clientlib.

http://localhost:4502/libs/granite/ui/content/dumplibs.html

To connect/apply clientlib with the component you can mention the class name mentioned in less from HTML page and the less file needs to be added to the index.less to make sure the file is loading.

In AEM all the css/less files will be combined and loaded only once so we do not have to make any other changes.

Thanks!