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
Solved! Go to Solution.
Views
Replies
Total Likes
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!
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!
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
Views
Replies
Total Likes
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).
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!
Views
Replies
Total Likes