How to Style Components in AEM, css is not getting compiled - AEM version 6.5 | Community
Skip to main content
H
Heena91
Level 3
April 19, 2021
Solved

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

  • April 19, 2021
  • 1 reply
  • 2476 views

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

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by Asutosh_Jena_

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!

1 reply

Asutosh_Jena_
Community Advisor
Asutosh_Jena_Community AdvisorAccepted solution
Community Advisor
April 19, 2021

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!

    H
    Heena91Author
    Level 3
    April 19, 2021

    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

    Terms & ConditionsAccessibility statement

    Loading footer...