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
BedrockMission!

Learn more

View all

Sign in to view all badges

SOLVED

Missing CSS .

AEMnewbie
Level 4
Level 4

I created a small component , with some CSS.

1.CSS was created at  component/clientlib/less/x.less level

2. And then this file name was added in css.txt 

3. And an x component group was added.

4. Navigated to structure page customheaderlibs.html and noticed that it is referring to clientlib-base

5. Navigated to clientlibs folder and added my component x in the embed.

 

When i deployed my code changes and navigated to my page which uses this component, in the network tab under clientlib-base.css i dont see my component less css .

 

I am using AEM 6.5 service pack 6.5.4 . Not sure what else needs to be verified .

1 Accepted Solution
Shashi_Mulugu
Correct answer by
Community Advisor
Community Advisor

@AEMnewbie Can you post a screenshot of how clientlib was setup so that we can see the structure and compare the files.

 

Also Can you try to add the Component Clientlib category directly to your customheaderlibs.html just to validate if it is loading/compiling the clientlib individually.

 

<sly data-sly-use.clientLib="/libs/granite/sightly/templates/clientlib.html" data-sly-call="${clientlib.css @ categories='clientlib.base, 'component.clientlib''}"/>

View solution in original post

13 Replies
Ravi_Pampana
Community Advisor
Community Advisor

Hi,

 

Can you provide where css.txt is added and the path how it is added to css.txt ?

 

Usually if we add like below it should work 

 

/apps/yourproject/components/yourcomponent/clientlibs/css/custom.less

/apps/yourproject/components/yourcomponent/clientlibs/css.txt - 

 

Content inside css.txt

     #base=css
      custom.less

 

clientlibs - should have jcr:primaryType "cq:ClientLibraryFolder" and should have categories added.

 

Also if less file is not formed properly (missing syntax) then the css wont generate and added to clientlib file.

 

 

 

 

AEMnewbie
Level 4
Level 4

@Ravi_PampanaThats exactly how i have it i was missing this #base=css i added it , but that didnt help. 

.article {
border:1px solid #ccc;
padding:0;
margin:0 5px 10px;
border-radius: 0 0 0 6px;
}

This is all i have in my less file 

Shashi_Mulugu
Correct answer by
Community Advisor
Community Advisor

@AEMnewbie Can you post a screenshot of how clientlib was setup so that we can see the structure and compare the files.

 

Also Can you try to add the Component Clientlib category directly to your customheaderlibs.html just to validate if it is loading/compiling the clientlib individually.

 

<sly data-sly-use.clientLib="/libs/granite/sightly/templates/clientlib.html" data-sly-call="${clientlib.css @ categories='clientlib.base, 'component.clientlib''}"/>

View solution in original post

AEMnewbie
Level 4
Level 4

Screen Shot 2020-08-24 at 4.26.59 AM.pngScreen Shot 2020-08-24 at 4.26.30 AM.pngHello @Shashi_Mulugu .. I tried adding that .. Now i see all my component clientlib in the network tab.. but nothing in the response

Shashi_Mulugu
Community Advisor
Community Advisor
Then it is definitely a problem with component clientlib.. can you post your clientlib structure and css txt file
AEMnewbie
Level 4
Level 4

Screen Shot 2020-08-24 at 4.36.04 AM.png

Thats my less file .. inside my css.txt i have @Shashi_Mulugu 

#base=css
articlefeed.less

 

Shashi_Mulugu
Community Advisor
Community Advisor
@AEMnewbie Change #base=less, basically it is the folder name relative to clientlib folder where we placed our css files.
Arun_Patidar
Community Advisor
Community Advisor

Can you try to open base css in new tab and add ? mark at the end of the URL.

If everything setup correctly, there are possibility that -

1. Clientlibs is cached in the browser

2. clietlibs are cached in data folder crx-quickstart/launchpad/felix/bundles/bundle-x/data/outcache

3. Less file has some error

 

bundle-x is id of HTML clienlibs bundle

AEMnewbie
Level 4
Level 4
Hello @Arun_Patidar I tried that ..the base css loads fine with the ? but i dont see my changes in there.. And then i tried to navigate to crx-quickstart/launchpad/felix/bundles/bundle-x/data/outcache .. I dont see any bundles folder under felix and i am not sure how i could find the bundle-x id of html
Arun_Patidar
Community Advisor
Community Advisor

I think, your less files are inside less folder not in css but you set css as base folder.
Try with try with

#base=less

articlefeed.less

 

Nikhil-Kumar
Community Advisor
Community Advisor

@AEMnewbie ,

As mentioned by @Arun_Patidar and @Shashi_Mulugu. Try adding #base=less. That should definitely  resolve the issue.

If issue still exists then try adding component's x category as part of Page policy, as you are using 6.5.4 with editable templates.
I faced similar issue on 6.5.5 but once I added it as part of Page policy it was picking up the styling from the clientlibs defined.

Nikhil_Kumar_AEM_1-1598279535321.png

Thanks,
Nikhil

 

AEMnewbie
Level 4
Level 4

@Arun_Patidar @Shashi_Mulugu Thanks Arun and Shashi.. CSS finally worked the issue was #base=less instead of #base=css