Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

SOLVED

How to Style Components in AEM, css is not getting compiled - AEM version 6.5

Heena91
Level 3
Level 3

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. 

 

Heena91_1-1618835227280.png

 

 

Thanks

Heena

1 Accepted Solution
Asutosh_Jena_
Correct answer by
Community Advisor
Community Advisor

Hi @Heena91 

 

Please see the structure below:

asutosh_jena_0-1618835656947.png

 

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!

View solution in original post

3 Replies
Asutosh_Jena_
Correct answer by
Community Advisor
Community Advisor

Hi @Heena91 

 

Please see the structure below:

asutosh_jena_0-1618835656947.png

 

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!

View solution in original post

Heena91
Level 3
Level 3

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_
Community Advisor
Community Advisor

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!